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Avant-propos 

Le collection Guide du codeur s'adresse aux personnes initiees a la programmation 
qui souhaitent decouvrir une technologie particuliere. Sans negliger les aspects 
theoriques, nous donnons toujours priorite a la pratique afin que vous puissiez 
rapidement etre autonome. Avant d'entrer dans le vif du sujet, notez ces quelques 
informations generates a propos de la collection. 

Conventions typographiques 

Afin de faciliter la comprehension de techniques decrites, nous avons adopte les 
conventions typographiques suivantes : 

■ gras : menu, commande, boite de dialogue, bouton, onglet. 

■ italique : zone de texte, liste deroulante, case a cocher, bouton radio. 

■ Police baton : instruction, listing, texte a saisir. 

■ : dans les programmes, indique un retour a la ligne du aux contraintes de la 
mise en page. 



«\arque 

Propose conseils et trues pratiques. 



^ention 

Met I'accent sur un point important, souvent d'ordre technique qu'il ne faut 
negliger a aucun prix. 



, , &nition 

Donne en quelques lignes la definition d'un terme technique ou d'une 
abreviation. 



s,uce 

II s'agit d'informations supplementaires relatives au sujet traite. 



) 
) 
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1.1 Avertissement 

Ce livre vous fera decouvrir progressivement XAML au moyen d'exemples. 
Nous partirons des fonctionnalites les plus simples et les plus utiles pour aller 
vers des notions un peu plus complexes. Toutefois, afin que vous puissiez 
facilement revenir par la suite sur une fonctionnalite particuliere, les elements 
sont regroupes le plus possible dans des chapitres dedies. A la fin du livre, vous 
trouverez un recapitulatif des classes et des attributs utilises. Celui-ci se veut 
non pas un referentiel complet mais plutot un recapitulatif des notions vues. 

II s'agit d'une presentation du XAML et non de WinFX. C'est pourquoi nous 
nous attacherons principalement aux techniques accessibles depuis XAML, 
meme si a certains moments nous devrons evidemment voir ou realiser le code 
.NET associe. 

Au moment ou ces lignes ont ete ecrites, le code XAML et la bibliotheque 
WinFX avec laquelle il travaille etaient toujours en version beta et susceptibles 
d'etre modifies. II se peut que certaines fonctionnalites aient entre-temps ete 
ajoutees ou retirees. Comme nous nous interesserons surtout aux fonctions les 
plus courantes, il est probable que le contenu de ce livre respecte les regies en 
vigueur dans la version definitive du produit. 

1.2 Prerequis 

Avant de pouvoir developper avec XAML et WinFX, vous devez au prealable 
installer le Framework .NET 2.0 ainsi qu'une version de Visual Studio 2005. 

Vous pourriez utiliser n'importe quel editeur de texte, et ce y compris Notepad, 
mais l' utilisation de Visual Studio vous facilitera grandement la vie, que ce soit 
pour la creation des projets ou la compilation de votre application. II vous 
apporte egalement lTntelliSense, ce qui est un tres gros avantage. 

Vous devez ensuite installer le kit de developpement WinFX. Attention, 
Windows XP SP2, Windows 2003 ou Windows Vista est requis pour pouvoir 
l' installer ! 

Pour realiser les exemples, nous utiliserons d'une part "XAMLPad", un petit 
utilitaire livre avec le kit de developpement et d' autre part "Microsoft Visual 
Basic 2005 Express Edition". 

Afin de beneficier de toutes les fonctionnalites dans Visual Studio, vous devez 
egalement installer l' extension pour Visual Studio. 

L' ensemble de ces elements sera repris dans le Framework 3.0, dont la sortie est 
attendue pour le debut de l'annee 2007. 
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1 .3 Presentation de XAML 
Qu'est-ce que XAML ? 

Le XAML est un des composants de la nouvelle technologie Windows 
Presentation Fundation (en abrege, WPF). Cette technologie est accessible via 
le kit de developpement WinFX. 

WinFX doit remplacer l'ancien API Win32. Evidemment, pour des raisons de 
portabilite, l'ancien API sera encore present dans les futures versions de 
Windows, mais jusqu'a quand ? II a initialement ete cree specifiquement pour 
Windows Vista, mais Microsoft a decide de le rendre disponible pour Windows 
XP (SP2) et Windows 2003. WinFX est intimement lie au Framework .NET 
2.0. L'avantage d'utiliser WinFX par rapport a Win32 est qu'il apporte une 
approche vectorielle de l'affichage et offre des possibilites 3D. 

WinFX sera en definitive inclus dans le Framework 3.0, qui contiendra : 

■ Windows Communication Fundation ; 

■ Windows Presentation Fundation ; 

■ Windows Workflow Fundation ; 

■ Windows CardSpace ; 

■ .NET Framework 2.0. 

XAML, quant a lui, est un langage de description fonde sur la norme XML. 
Contrairement au XML, les noms des balises et leur contenu doivent respecter 
une syntaxe stricte et correspondre a une classe de WPF. Tout ce qui est fait en 
XAML peut egalement etre fait dans du code traditionnel. De meme, XAML ne 
supporte qu'une partie du modele offert par WPF. II offre en revanche une 
beaucoup plus grande lisibilite et une separation entre le code logique et 
l'interface graphique. Le XAML va nous permettre de decrire les ecrans de 
l'application. Le reste du traitement se fait de maniere traditionnelle, via du 
code .NET. 

Dans le cadre de ce guide d' initiation, les parties .NET des exemples sont en 
Visual Basic .NET mais, si vous preferez, vous pouvez bien entendu utiliser du 
C# ou n'importe quel autre langage .NET. Lapprentissage du .NET n'est pas 
l'objectif de ce guide ; neanmoins, pour une bonne comprehension des exem- 
ples, il sera souvent necessaire de voir aussi bien la partie XAML que la partie 
.NET. 

Afin de mieux comprendre la place de WinFX, de .NET et de XAML dans 
l' architecture, vous pouvez vous referer au schema ci-dessous. 
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Comme vous pouvez le constater, XAML, comme les langages .NET, forme la 
couche superieure et represente l'interface avec le developpeur. En dessous, 
nous retrouvons les couches composees de code manage ainsi que la CLR 
necessaire pour l'execution de ce code. La derniere partie est la couche de 
communication avec Windows lui-meme. A noter que WPF est pour sa part 
compose effectivement de Presentation Framework, de Presentation Core et de 
Milcore. 

Petits rappels XML 

Vous n'avez pas a connaitre XML pour utiliser XAML. Les quelques notions 
necessaries a la bonne comprehension vont vous etre expliquees dans ce 
chapitre. 

Le XML presente les informations de facon structuree et hierarchique sous 
forme de texte. 

Un fichier XML contient un ou des nceuds dans lesquels s'imbriquent d'autres 
nceuds appeles nceuds enfants. 

Mais qu'est-ce qu'un nceud ? 

<NomDuNoeud> 

<NoeudEnfant> 

Valeur 
</NoeudEnfant> 
<NoeudEnfant> 

Valeur 
</NoeudEnfant> 
</NomDuNoeud> 

Un nceud est tout ce qui se trouve entre une balise ouvrante <NomDuNoeud > et 
une balise fermante </ NomDuNoeudx 

Les attributs sont des informations qui se placent dans la balise ouvrante. 
<NomDuNoeud MonAttribut= "valeur"> 

L'attribut est toujours suivi du symbole = et d'une valeur entre guillemets. Si 
le nceud ne contient que des attributs, la syntaxe autorise de ne pas placer de 
balise fermante. La balise ouvrante se termine alors par le symbole /. 

<NomDuNoeud MonAttribut= "valeur" /> 

Pour commenter du code XML, vous inclurez les commentaires dans une balise 
specifique. 

<!-- votre commentai re --> 
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Le commentaire peut sans probleme s'etendre sur plusieurs lignes. 

Les principes generaux 

Le principe general est finalement assez simple, chaque balise XAML identifie 
une instance d'une classe de la librairie WinFX. L'instanciation de cet objet est 
effectuee automatiquement. Vous ne devez ni le declarer ni l'instancier avec New 
dans votre code .NET. 

Par exemple, 
<Window /> 

permet d'instancier un objet de la classe Wi ndow. Si vous desirez initialiser une 
propriete de la classe, il suffit d'ajouter un attribut dans le noeud XML ou, selon 
les cas, de creer un noeud enfant. 

Exemple : 

<Window Title= "Titre" /> 

Cette balise permet d'assigner la valeur "Titre" a la propriete Titel de la 
classe Window. Notez que meme les proprietes numeriques doivent etre assi- 
gnees comme une chaine de caracteres. Pour les valeurs booleennes, vous devez 
assigner True ou Fal se entre guillemets. 

Pour les collections, il s'agit de definir des nceuds enfants. Par exemple : 

<Wi ndow> 

<Wi ndow. InputBi ndi ngs> 

</Wi ndow. InputBi ndi ngs> 
< /Window> 



^ention 

7 Le langage XAML est sensible a la majuscule 

Vous devez respecter I'ecriture exacte definie dans la documentation, et ce 
meme si votre projet est en Visual Basic. N'ecrivez done pas WINDOW mais bien 
Wi ndow. 



3la 
en 



Comme en XAML les noms des attributs des balises XML correspondent aux 
noms des proprietes de la classe associee, nous parlerons indistinctement dans 
ce livre d' attribut ou de propriete. 
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Pour mieux comprendre cette notion de correspondance entre XAML et les 
langages .NET, sachez que les deux bouts de code ci-dessous ont la meme 
fonction. 

En XAML : 

<Label Name="lblNom" Width="60" Height="20"> 

mon nom 
</Label> 

En VB .NET : 

Dim lblNom as new Label 
Ibl Nom. Width = 60 
lbl Nom. Height = 20 
Ibl Nom. Text = "mon nom" 

Comme vous pouvez le constater, ce qui est fait en XAML peut parfaitement 
etre fait en code .NET. Toutefois, la bonne pratique veut que Ton utilise XAML 
pour decrire l'interface et les langages .NET traditionnels pour les traitements. 
Pour une meme classe, vous aurez alors vraisemblablement deux fichiers de 
sources, un en XAML et l'autre en code .NET. Les deux seront fusionnes lors 
de la compilation. 

Nous reviendrons sur les differents fichiers automatiquement generes ou non au 
cours de ce livre, au fur et a mesure des besoins et de 1' explication des 
differentes notions. Sachez toutefois que du code XAML seul peut deja etre 
compris par le systeme et interprete sans meme devoir utiliser un compilateur. 
C'est par ce genre de code que nous allons commencer. 

XAML contient malgre tout quelques petites subtilites que nous allons detailler. 

Tout d'abord, le code XAML doit contenir un element root comme le veut 
XML, mais cet element doit etre un element faisant partie du modele 
d' application comme Window ou Page ou encore un conteneur tel Grid ou 
StackPanel. Nous reviendrons ulterieurement sur la notion de conteneur et 
d'elements d'application. Cet element root doit contenir comme attribut la 
declaration de deux Namespaces au minimum. Cette declaration se fait en 
utilisant l'attribut classique xmlns. 

<Wi ndow 

xml ns="http : //schemas .mi crosof t . com/wi nfx/2006/xaml /presentati on" 
xmlns :x="http://schemas. mi crosoft.com/winfx/2006/xaml " 

> 

S'il est necessaire de faire reference a d'autres namespaces, il sera necessaire 
d'ajouter d'autres attributs xmlns en respectant la syntaxe ci-dessous. 
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xmlns:nom="clr-namespace:nom du namespace ;assembly=nom de 1 'assembly" 

U assembly peut etre omis si le namespace est contenu dans le meme assembly 
que le programme. 

XAML autorise egalement l'utilisation d'attributs particuliers, dont voici les 
principaux. 



Attributs specifiques 


ALtriDUt 


Utilite 


x:Name 


Cet attribut a la meme fonction que l'attribut Name, qui est 
generalement present. lis sont totalement interchangeables 
mais ne peuvent etre utilises simultanement. Preferez Name a 
x:Name et limitez l'usage de ce dernier aux objets qui ne 
disposent pas de la propriete Name. 


x:Key 


Est encore un moyen de donner un nom mais, typiquement, 
ce type de nommage est utilise pour nommer des ressources. 
11 ne s'agit en aucun cas du meme usage que x:Name. 


x:Class 


Attribut place dans 1' element root ; il fait le lien avec la 
classe defmie dans le code behind (.NET). 


x:ClassModifier 


Permet de specifier d'autres modifieurs que partial et 
public, qui sont les valeurs par defaut. 


x:Null 


Pour definir une valeur nulle a une propriete. 


x:Code 


Permet d'introduire du code .NET dans le fichier XAML. 11 
sera generalement utilise en conjonction avec CDATA : 
<x:Code> <! [CDATA [ Code... ]]> </x:Code> 


x: Static 


Pour acceder a une valeur statique d'une classe. 


x:Type 


Dans XAML, il a le meme effet que TypeOf dans le code 
.NET. 


x:TypeArgument 


Pour determiner le type des arguments qui doivent etre recus. 
Cet attribut est principalement utilise par PageFunction. 


x: Array 


Permet d'instancier un array comme valeur d'un attribut. 
Toutefois, il n'est pas possible de remplir cet array dans le 
code XAML. 



Ces differentes notions seront abordees par l'exemple dans la suite de ce livre. 



1.4 Utiliser XAMLPad 

L'utilitaire XAMLPad est tres simple d'emploi et permet de visualiser tres 
rapidement du code XAML. II est toutefois limite au XAML statique. C'est 
pour cette raison que certains exemples seront realises avec Visual Studio. 
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XamlPad se presente comme une fenetre en deux parties. La partie superieure 
affiche le resultat du code et la partie inferieure, le code lui-meme. 




<Page 

xmin3="http : / / schemas .microsoft . com/vinf x/2 006/xaml/presentation" 
xmlns:x="http: //schemas .microsoft.com/winfx/2006/xaml" 
Title="testrtf " Height="300" Width="300" 
> 

</Page> 



Done. Markup saved to "C:\Program Rles\Microsoft SDKs\Windows\vl.0\Bin\XamlPad_5aved.xaml". 



A Figure 1-1 : L'outil XAMLPad livre avec le kit de developpement 

En resume, vous tapez le code en bas, il affiche le resultat en haut. C'est aussi 
simple que cela. 

Pour faciliter la vision, vous disposez de quelques options : 

■ Auto Parse, qui est activee par defaut et traite en temps reel votre code 
XAML. Ainsi, vous constatez directement 1' impact de vos changements. 



^uce 

Long code source 



Si votre code est long, vous pouvez desactiver I'option AutoParse. Cela vous 
evitera de desagreables effets de rafraTchissement. 



Refresh. N'est vraiment utile que si YAuto Parse est desactivee. 

L'icone d'imprimante, qui imprime le resultat mais pas le code. 



S> 



Avec les autres options de la barre d'outils, vous pouvez changer la police 
utilisee pour le code, choisir de cacher temporairement le code ou encore faire 
un zoom de la fenetre d'affichage du resultat. 

Consultez la barre de statut, elle vous donne de precieux renseignements sur 
votre code en cours de frappe. 
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II est dommage que 1'IntelliSense ne soit pas disponible dans cet utilitaire. Si 
vous desirez en disposer, vous pouvez reproduire les exemples dans Visual 
Studio. Mais vous devrez alors prealablement creer un projet specifique et 
demander chaque fois l'execution pour visualiser le resultat. 

0^^^Vous pouvez vous reporter au chapitre Creer une application 
Renvoi Windows page 132 pour vous aider a creer votre projet. 



1.5 Checklist 

Les notions essentielles que nous avons vues dans ce premier chapitre sont : 

■ le materiel necessaire pour debuter en programmation XAML ; 

■ les bases du XML ; 

■ comment fonctionne XAML ; 

■ comment utiliser l'outil XAMLPad. 
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Dans ce chapitre, nous allons voir de maniere individuelle les differents 
elements de base necessaires a la realisation d'une interface utilisateur. Cela 
nous permettra d'aborder l'affichage et la saisie de texte, raffichage d'une 
image et l'utilisation d'un bouton. Avec ce minimum de connaissance, nous 
pourrons ensuite passer a l'etape suivante, qui sera le placement des elements. 
C'est seulement apres que nous aborderons les autres controles classiquement 
utilises. Dans le but de grouper les fonctionnalites, nous ne nous contenterons 
pas de survoler ces fonctionnalites mais les verrons assez en profondeur. 



2.1 Afficher du texte 

XAML offre deux possibilites de base pour l'affichage de texte. Dans ce 
chapitre, nous verrons les deux methodes et decouvrirons les avantages de l'une 
et de l' autre. Nous decouvrirons en meme temps de nombreuses possibilites qui 
pourront etre exploiters avec la majorite des controles. 

Le premier des controles est de loin le plus connu puisqu'il s'agit du Label, 
l'autre est le TextBlock, que nous allons decouvrir ensemble. 

Avec un Label 

Le Label est probablement le controle le plus utilise. II reste tres simple a 
manipuler mais, comme vous allez le constater, il nous reserve d'agreables 
surprises. 

Pour creer un label, vous devez utiliser la balise du meme nom. 

<Page 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<StackPanel> 
<Label> 

Mon premier label . 
</Label> 
</StackPanel> 
</Page> 

Ne vous souciez pas pour l'instant des balises Page et StackPanel . Nous verrons 
ulterieurement a quoi elles servent et comment les utiliser. Sachez seulement 
que, sans la balise Page ou une autre balise racine valide, vous ne pourrez 
visualiser le resultat. La balise StackPanel sert de conteneur. 

0^^^. Nous reviendrons sur les conteneurs dans le chapitre Disposer les 
Renvoi elements a I'ecran sur la mise en page (page 56). 
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Dans la suite, ces balises ne seront plus systematiquement reprises au sein des 
exemples mais elles devront evidemment etre presentes. 



« XamlPad 




x 


| * Auto Parse ► Refresh 






Mon premier label. 


<Fage 
xmlns""http : / /ache 
xmlns : x="httc : z : 
<Stack:?a:iel> 
<Label> 

Mon p remit 
</Label> 
</Scac]cPanel> 
</Page> 


153 .CllCrCf 2ft . 2 22 

r.err.s i : : : i : z~. . 
r label. 


• 


< 


■ 




Done. Markup saved to C:\Program Files\Microsoft 
SDKs\Windows\vl.O\Bin\XamlPad_Saved.xarnl. 



Figure 2-1 : Une 

simple etiquette 



Au lieu de placer le code entre la balise de debut et la balise de fin du nceud 
Label , vous pouvez egalement opter pour assigner l'attribut Content. Le resultat 
sera le meme. 

La syntaxe devient alors : 
<Label Content="Mon premier label. "/> 



^arque 

^* Portee des explications 

Les attributs que nous allons voir dans cette partie seront egalement utilisables 
pour les autres controles que nous aborderons ulterieurement. 



les^ 



Comme beaucoup de controles, le Label occupe un espace rectangulaire. Nous 
pouvons nous en rendre compte en affichant un bord autour de notre controle. 

<Label BorderBrush="Chocol ate" BorderThickness="l"> 

Mon premi er I abel . 
</Label> 

Les deux attributs sont necessaires car aucune couleur n'est definie par defaut 
et la taille est de zero. 
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% XamlPad 



Mon premier label. 



00® 



< = ?.:; a 

xmlns> > 'http:/ /scnemaa.nicrosoft .ccn 
xmln3 : x="hrrr : /3cheirta3 .xirr 232 f - . c 
<Sta2>:ranel> 

<Lacel 52rder5r , j3r.="~h2 relate 

|</Lacel> 
</StackPanel> 
</Page> 



Done. Markup saved to C:\Program Files\Microsoft 
SDKS\Windo\vs\vl.O\Bin\XamlPad_Saved.xaml. 



< Figure 2-2 : Une 

etiquette dans un 
cadre 



La taille occupee depend de divers parametres comme la taille de la fenetre. 

Si vous souhaitez controler la taille de cette zone, vous pouvez utiliser les 
attributs Width et Height. Dans l'exemple, nous allons fixer la taille a 200 pixels 
de large sur 60 pixels de haut. 

<Label BorderBrush="Chocol ate" BorderThickness="l" 
Width="200" Height="60"> 

Mon premi er 1 abel . 
</Label> 

Comme vous pouvez le constater, la zone occupee a ete modifiee. 



r 

• XamlPad Q 


III 


x 


1 | > Auto Parse j ► Refresh £ - - 






Mon premier label. 














<Pa : r 






A. 


xmlr 
















<LafceI 5orderBru3h="~hDCcl 
lfidtli»*200 - Height—" 60 ■> 








Men prexier label. 








</Lafcel> 






</Staclc?anel> 




V 


✓ /Da-. 






< 




> 




Done. Markup saved to C:\Program Hles\Microsc 
SDKs\Windows\vl.O\Bin\XamlPad_Saved.xaml. 







■< Figure 2-3 : La 

taille d'une etiquette 
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^arque 

^ Centrage 

Notez au passage que par defaut le controle est centre horizontalement. 



J 



Ce n'est pas le seul moyen de controler la taille du Label. XAML met 
egalement a notre disposition les attributs MinWidth, MinHeight, MaxWidth et 
MaxHeight. 

Avec ces attributs, vous laissez la taille s'adapter a l'environnement tout en 
fixant des valeurs limites. 



<Label BorderBrush="Chocol ate" BorderThickness="l" 

Mi nWidth=" 100" Mi nHei ght="30" 

MaxWidth="300" MaxHeight="80"> 

Mon premi er 1 abel . 
</Label> 




Alitalia ;a= ut.141;/ faauz 
<Sta;:<?a:iel> 

<Lafcel BzrderB 

Mon premier 
</Label> 
</Stac]cPanel> 
</Eaje> 



Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xamt. 



■4 Figure 2-4 : 

etiquette avec 
MinWidth et 
MaxWidth 



Une 



Si la position du texte ne vous convient pas, vous avez l'opportunite de 
modifier l'alignement horizontal et vertical. Vous pouvez utiliser les attributs 
Horizontal ContentAl ignment et Vertical ContentAl ignment. 



<Label BorderBrush="Chocol ate" BorderThickness="l" 

Width="200" MinHeight="60" 

Hori zontal ContentAl i gnment="Center" 

Verti cal ContentAl i gnment="Bottom"> 

Mon premi er 1 abel . 
</Label> 
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Les valeurs possibles sont respectivement Left, Rigth, Center, Stretch et Top 
pour l'alignement horizontal et Bottom, Center et Stretch pour l'alignement 
vertical. 



ESS 




xnlna : x="ht-p: / / schema? .rcicrrs-f- . som/vih 
<Staci£ranel> 

<Lafcel 5order3rus:i»"rh-=2la-a" 3ord< 
^ ia-h=" 2 0 0 ■ MisKeiQhe*" CO" 
H:ri2:r.-alC-r.-enTAliTrjnen-="2en-er 
VfrrtlcwlCftnTiml >1 lyi—iil ""Tliil 1 1 1~ i 
Men premier label. 
</Label> 
</SraclcFanel> 



< 



> 



Done. Markjp saved to C:\Program Fi!es\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



< Figure 2-5 : 

Alignement du 
contenu d'une 
etiquette 



^ention ^^^^^^^^^^^^ ^^^^ 

^" Ne pas confondre 

Ne confondez pas ces deux attributs avec les attributs Vertical Al ignment 
Horizontal Al ignment, qui permettent de centrer le controle dans s 
conteneur. 




<Page 
xmlns= 

" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<Label BorderBrush="Chocolate" BorderThickness="l" 
Hori zontal Al i gnment="Center" 
Vertical Al ignment="Center"> 
Mon premier label . 
</Label> 
</Page> 



^arque 

^* Absence de la balise StackPanel 

Pour une meilleure comprehension, dans cet exemple, la balise StackPanel 
ete retiree. C'est pourquoi le code est presente complet. 
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IBH3S3 



* Auto Parse ► Refresh 



Mon premier label. 



<Page 

xmlns«"::trp: / /schemaa.Eiicroscft-.ccm/vmfx 
xmlna : x«"hT-p : / .'schema* .micrcacf c . com/win 
<Lacel 5srder5ru3:i="~icc2lare" 3ord> 
HorlzontalAU0HKDt* > 'CeBter a 
VerricalAli?rjneh-="Cencer''> 
Mon premier label. 
</Lobel> 
</Page> 



Done. Markjp saved to C:\Program Files'yMicrosoft SDKs 
\Windc\'.s\vl.o\Bin\XamlPad_Saved.xaml. 



■4 Figure 2-6 : 

Centrer I'etiquette 



Si la police par defaut ne vous convient pas, vous disposez de cinq attributs 
differents pour 1' adapter a votre gout. 

L'attribut FontFamily permet de selectionner le type de police comme Arial ou 
Verdana. L'attribut FontSize determine la taille. 



<Label Horizontal Al ignment="Center" 
VerticalAl ignment="Center" 
FontFamily="Verdana" FontSize="14" 
FontWei ght="Heavy" FontStyl e=" Ital i c" 
FontStretch="Ul traExpanded"> 
Mon premi er 1 abel . 

</Label> 



Lllnllxi 



IE 



Auto Parse ► Refresh 



Mon premier label. 



<Page 

xml:is-"http: / fschemas .microsofc.com/winfx 
xmlna : x«"hrcp : / /schemas .micrcsof z . com/win 
<Lafcel Hori2ontalAllgiuBent="Center" 
Vp i i ii will ijif in ""Pin p i ~ 
Font; amily="Verlar.a" FontSize-"24" j 
FoatHeight*"Beavy" FontStyle*" I t*l: 

FnrirSrrerc:h="UlcraExpar.dea"> 
y.oTi premier latel. 



Done. Markup saved to C:\ D rogram Files\Microsoft 5DKs 
\Windows\vl.O\Bir\XarnlPad_Saved.xaml. 



*4 Figure 2-7 : 

Affichage dans une 
police differente 
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Contrairement a ce que nous connaissions avant, les possibilities sont bien plus 
etendues. FontStrech accepte pas moins de dix valeurs differentes allant de 
Ul traCondensed a Ul traExpanded alors que FontWei ght accepte quatorze valeurs 
allant de Thin a Heavy. La taille du font peut varier de 1 a 35 791. 

En ce qui concerne les couleurs, nous disposons des attributs tres traditionnels 
Foreground et Background. 

<Label Horizontal Al ignment="Center" 

VerticalAl ignment="Center" 

FontFamil y=" Verdana" FontSize="14" 

FontWei ght="Heavy" FontStyl e=" Ital ic" 

FontStretch="Ul traExpanded" 

Foreground="Aquamarine" Background="Blue"> 
Mon premi er 1 abel . 
</Label> 



0©K 



I > Auto Pai 



Mon premier label. 



xmln3="r.ttp : f fscbouui .microsoft, cca/vinfx 
xm.n3:x="ht-p: / /schema? .Microsoft . c cm / win 
<Label Her izontalAlignment=" Center 
Vf 1 1 li nlftl lyiif nl^Tf HI pi " 
Fon , cFamily="VercLar.a" FontSize="14" 
FontWeiaht="Hea--y" Fcn-Style=TraI. 
FD.-.rS i :rctch» , 'UltraZxpar.dedi" 
| roxe qr ouad»"lquaaarine " Background" 
Mon premier lafcei. 



Done. Markup saved to C:\Program Files\Microsoft SDKs 
\Windo\vs\vl.O\Bin\XamlPad_Saved.xaml. 



M Figure 2-8 : 

Couleur de fond et 
d'avant-plan 



Nous avons vu les principales possibilities offertes avec le controle Label et qui 
sont par ailleurs applicables aux autres controles classiques que nous verrons 
dans ce chapitre. 



Nommer ses controles 

Pour pouvoir ulterieurement interagir avec les differents controles que vous 
avez crees, ils doivent porter un nom. Bien que vous n'ayez pas a interagir avec 
tous les controles, je vous conseille de les nommer tous, et ce y compris les 
Label . Votre code s'en trouvera beaucoup plus clair. 
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Pour nommer le controle, vous devez utiliser l'attribut Name. Vous vous rendrez 
vite compte qu'il est utile d'utiliser systematiquement cet attribut. 

<Label Name="lbl Premier-Label" 

Hon' zontal Al i gnment="Center" 

VerticalAl ignment="Center" 

FontFamily="Verdana" FontSize="14" 

FontWei ght="Heavy" FontStyl e=" Ital i c" 

FontStretch="Ul traExpanded" 

Foreground= "Aquamarine" Background="Blue"> 
Mon premi er 1 abel . 
</Label> 



^ Donner toujours des noms clairs a ses centrales 

La comprehension finale de votre programme sera grandement accrue si les 
noms donnes sont clairs et sans ambigul'te. Si, sur le moment, cela vous paraTt 
superflu, lors de modifications ulterieures vous serez tres heureux de I'avoir fait. 
Dans les exemples, en plus d'un nom explicite, je commence par un prefixe qui 
identifie le type de controle. II existe d'autres conventions de nommage, 
chacune ayant ses avantages et ses inconvenients. Choisissez-en une et 



tenez-vous-y. 




Vous pouvez par exemple opter pour cette convention de nommage. 


Exemple de convention de nommage 


Type 


Convention 


Nom des classes 


Camel Case. Ex. : MaClasse 
Remarque : Camel Case est un terme courant qui 
signifie que chaque mot dans le nom donne 
commence par une majuscule et que le reste du mot 
est en minuscule. 


Nom d'un membre public 


Camel Case suivi de m. La bonne pratique veut que les 
membres publics soient evites. Preferez un membre 
prive associe a une propriete pour y acceder. 
Ex. : NomDeRue m 


Nom d'un membre prive 


Camel Case commencant par une minuscule et termine 
par m. Ex. : nomDeRue m 


Nom d'une propriete 
publique 


Camel Case commencant par une majuscule. Si la 
propriete est associee a un membre, le nom de la 
propriete sera le meme que le nom du membre 
associe mais sans le m. Ex. : NomDeRue 
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Exemple de convention de nommage 


Type 


Convention 


Nom d'une propriete 
privee 


camel Case commencant par une minuscule Si la 
propriete est associee a un membre, le nom de la 
propriete sera le meme que le nom du membre 
associe mais sans le m. Ex. : nomDeRue 


Nom de variable 


Camel Case commencant par une minuscule. 
Ex. : nomDeRue (en VB, vu que le langage est 
insensible aux majuscules, il sera probablement utile 
d'ajouter le suffixe v pour eviter la confusion avec la 
propriete) 


Nom d'un controle 


Camel Case termine par le type de controle. Microsoft 
preconise maintenant que le type soit ecrit dans son 

pntiprptp (TpxtRnx pt nnn TyM Py * nnmnpRupTpxt Rnx 

Comme d'ailleurs dans ce livre, vous trouverez 
souvent le type de controle en prefixe et non en 
suffixe. Toutefois, le fait de placer le type a la fin a 
l'avantage de regrouper les elements concernant une 
meme donnee dans 1'IntelliSense. La bonne pratique 
veut que les controles soient prives. Si tel n'est pas le 
cas, le nom doit commencer par une majuscule. 


Constante 


Tout en majuscule precede de . 
Ex. : _CHEMINDUFICHIER 


Espace de nom 


Camel Case. Ex. : MonProgramme. Operation 


Enumeration 


CamelCase Ex. : Couleur.Bleu Couleur.Vert 



Avec un TextBlock 

L'origine du TextBl ock est plutot Web que Windows. II fait pourtant son entree 
dans l'API disponible pour les applications Windows classiques. 

Contrairement au controle de type Label, TextBlock n'herite pas de la classe 
Control. TextBlock est optimise pour l'affichage de longs textes. 

Je ne reviendrai pas sur la maniere de modifier les couleurs ou la police, il suffit 
d'utiliser a l'identique les techniques vues precedemment. 

Le TextBlock necessite un peu plus de mise en forme que le Label, qui se 
contente d'un minimum. En effet, si nous utilisons la commande ci-dessous : 



<TextBlock Name="blckTexte"> 




Nous sommes maintenant arrives a notre deuxieme 


controle. 


Comme vous avez deja pu le constater, XAML est 


a la fois 


simple d 1 utilisation et performant. 




</TextBlock> 
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le resultat ne sera pas a la hauteur de nos esperances. 



• XamlPad [T]@K 


|' Auto r'arse ► Refresh . . 




Nous sommes maintenant arrives a notre deuxieme controle. G 










Nous sommes mair.tenar.t arrive 




Comme vous mi de;a pu le cd 




simple d'utllisation er perfo 




</rext31ock> 




</Sta=JcFanel> 












< > 




Done. Markjp savec to CyPrco'sn Files ic reseat 5^Ks 




\Windows\vl.O\Bin\XamlPad_Saved.xaml. 





•< Figure 2-9 : Un 

bloc de texte 



II est possible de determiner une taille a la zone d'affichage, et ainsi nous 
pouvons demander un arrangement automatique du texte. 

<TextBlock Name="blckTexte" 
MaxWidth="200" MaxHeight="70" TextWrapping="Wrap"> 
Nous sommes maintenant arrives a notre deuxieme control e 
Comme vous avez deja pu le constater, XAML est a la fois 
simple d 1 utilisation et performant. 

</TextBlock> 



I* Aj-j-a-se ► Refresh . . 

Nous sommes maintenant arrives a 
notre deuxieme controle Comme vous 
avez deja pu le constater, XAML est a la 
fois simple d'utitisation et performant. 



<Stacl£=anel> 

<TextBlock Hww "til rVTirrti" 
MaxWidth="2: :■" KaxHeight«-?D" I 
Noua sommes maintenant arrive 
Comme vous avez de;a pu le co I 
simple d" utilisation et perfo 
</Text31oc)c> 
</Sta=JcFanel> 
</Page> 



Done. Markjp ssvec to Ci'-.-rca'an FilesV-'icrss-rrt S2Ks 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



< Figure 2-1 0 

bloc de texte 
multiligne 



Un 
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Ce qui est beaucoup plus conforme au resultat attendu. 



7* Limiter la taille au lieu de la fixer 

Au lieu de fixer la taille, choisissez de delimiter une taille maximale. De cette 
maniere, si nous reduisons la taille de la fenetre, le texte s'adapte au mieux aux 
modifications. 



1 XamlPad Q[t 



Nous awes nairtenan: arrives 
a notre deuxieme contjole 
Comme vous avez deja pu le 
ss-rstarer, XA''L est a la fois 
simple d' utilisation at performant. 



Done. Maricup saved to "C: 
\Program Files\Micrasoft SDKs 
\Windows\vl.O\Bin 
\XarnlPa::_Saved.)(amr. 



Figure 2-1 1 : Le meme bloc 



L'attribut TextWrapping peut prendre les valeurs NoWrap, Wrap mais egalement 
WrapWithOverflow. Dans ce dernier cas, la taille du controle sera automatique- 
ment agrandie si necessaire, meme si vous avez defini une taille avec l'attribut 
Height. 

Bien sur, si pour quelque motif que ce soit la zone reservee au TextBlock 
devient trop petite, le texte ne pourra plus etre entierement affiche. Dans ce cas, 
l'attribut TextTrimming nous permettra d'inclure automatiquement les « ... » 
signalant ainsi a l'utilisateur que le texte est incomplet. 



<TextBlock Name="blckTexte" 
MaxWidth="200" MaxHeight="70" 
TextWrappi ng="Wrap" TextTrimmi ng="WordEl l i psi s"> 
Nous sonnies maintenant arrives a notre deuxieme controle 
Comme vous avez deja pu le constater, XAML est a la fois 
simple d' utilisation et performant. 
</TextBlock> 



• XamlPad 0[B](5< 



Nous scmrres mairtenar: 
arrives a rratre deuxierne 
controle Comme vous avez de)a 
pu le constater, XAML est a la 
fois simple d utilisation =t 



Done. MarkLp saved tc "C: 
\Program Files 1 , Microsoft 
SDKs\Windows\vl.O\Bin 
\XamlP3C_SBved,xarrr, 



M Figure 2-12 : Un bloc de texte avec 
coupure 



32 • Le guide du codeur 



Afficher du texte 



L'attribut TextTrimming, en plus de la valeur par defaut (None), peut prendre 
deux valeurs differentes. Soit WordEl 1 i psi s, comme dans notre exemple, ou 
l'arret se fait apres un mot entier, soit CharacterEl 1 ipsis, qui provoque l'arret 
derriere n'importe quel caractere. 

Comme vous pouvez le constater, le controle se place tres pres des bords de son 
conteneur, ce qui n'est pas forcement du meilleur effet. Vous pouvez definir une 
marge tout autour de votre controle en utilisant l'attribut Margin. Cet attribut 
n'est pas specifique au TextBlock et nous aurions deja pu l'utiliser avec le 
controle de type Label . 

<TextBlock Name="blckTexte" 
MaxWidth="200" MaxHeight="70" 
TextWrappi ng="Wrap" TextTrimmi ng="WordEl 1 i psi s" 
Margin="5,5,5,5" > 
Nous sonnies maintenant arrives a notre deuxieme controle. 
Comme vous avez deja pu le constater, XAML est a la fois 
simple d 1 utilisation et perf ormant . 
</TextBlock> 



Nous sc-nrres mairtenan: 
arrives a notre deuxieme 
controle. Comme vous avez 
deja pu le constater, XAML 
est a la fois simple 



Done. Markup saved to "C: 
\Prograrn Files'iMicrosoft 



Pour terminer les specificites du TextBlock par rapport au Label, il nous reste 
a voir l'attribut TextAl ignment. Les valeurs possibles sont les tres classiques 
Left, Right, Center et Justify. 

<TextBlock Name="blckTexte" 
MaxWidth="200" MaxHeight="70" 
TextWrappi ng="Wrap" TextTrimmi ng="WordEl 1 i psi s" 
Margin="5,5,5,5" TextAl ignment="Justify" > 
Nous sorrmes maintenant arrives a notre deuxieme controle. 
Comme vous avez deja pu le constater, XAML est a la fois 
simple d 1 utilisation et performant. 
</TextBlock> 




SDKs\Windov.'s\vl.O\Bin 
\XatniPad_Saved .xa m I". 



■< Figure 2-13 : Marges autour d'un 
controle 
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* Auto Parse | ► Refresh 



Nous sommes maintenant arrives a 
notre deuxieme controle. Comme vous 
avez deja pu le constater, XAML est a la 
fois simple d utilisation e: perormant. 



xnlna : x="hrtp : / < schema .nicrc 1 
<Stac*raneI> 

<TextElD23c Kame="blckTe: 
Max«iarh="2"" KaxHeig 
Text* rapping- "Wrap" Te; 
Margin*"5, 5, 5, 5" Text. 
V.-us f prunes T.air.tena: 
Ccmme vooa avez de:a 
■lapis 1'ncillMtlon 



Done. Markjp saved to C:\Program Files 
\Microsoft 5DKS\Windows\vl.0\Bln 
\XamlPad_Saved.xam!, 



<4 Figure 2-14 : Alignement du texte 



De plus, le TextBlock permet d'enrichir le contenu. Vous pouvez par exemple 
y inscrire du texte en gras, en italique ou souligne. 



<TextBlock Name="blckTexte" 
MaxWidth= M 200" MaxHeight="70" 
TextWrapping="Wrap" TextTrimming="WordEl I ipsis" 
Margin="5,5,5,5" TextAlignment="Justify fl > 
Nous sommes maintenant arrives a notre deuxieme controle 
Comme vous avez deja pu le constater, <Bold>XAML</Bold> 
est a la fois <Underline>simple d'utilisation</Underline> 
et <Italic>performant</Italic>. 
</TextBlock> 



QUE 



| * Auto Parse | ► Refresh . . 

Nous sommes maintenant arrives a 
notre deuxieme controle Comme vous 
avez deja pu le constater, XAML est a la 
fois simple d utilisation et performant 



<TextBlodt r'ame="fclc)cTexte" 
HuBldtb""2C : " Max Height ""TO' 
TextWrapping="7i"rap" TextTrim 
Margin-"5, 5, 5, 5" Text«lig:m* 
Houa acmme* maintenant am 
Ccrrae vous avez de;a pu le 
est a la foia <UnderIine>s: - 
et <Italic>perfannant</Ita] 
</Text31oc)f> 



Done. Markup saved to C:\Program Rles\Micrcsc^t 5DKs 
\Windows\vl .0\Bin\XamlPad_5a ved.xaml . 



< Figure 2-15 : 

Enrichissement du 
texte 
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Si ces possibilites d'enrichissement ne vous suffisent pas, vous pouvez utiliser 
TextDecoration. Cette propriete n'est pas specifique a TextBlock, et vous 
pouvez la retrouver quasiment partout oil du texte est affiche. Elle est accessible 
grace a la balise TextBlock. TextDecorations, pour un autre controle, remplace 
TextBl ock par la valeur appropriee. Elle permet d'ajouter des decorations a vos 
caracteres. La description de la decoration est definie a l'interieur du noeud 
TextDecoration. La decoration est en realite un trait qui peut etre place a quatre 
endroits differents. La position est definie au moyen de la propriete Location. 
Elle peut etre au-dessus du caractere, au milieu du caractere, sous le caractere 
ou juste sous le caractere. La taille, la couleur, la forme du trait sont definies 
avec un objet de type Pen. 

Ci-dessous, vous trouverez un code complet reprenant les differentes possibi- 
lites enumerees ci-avant. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 

> 

<StackPanel> 

<TextBlock TextWrapping="WrapWi thOverflow" 
Margin="5,5,5,5" Width="800" 
HorizontalAl ignment="Center"> 
<Bold>Non seulement vous pouvez utiliser 
1 'enrichissement classique</Bold> 
tnais vous pouvez aussi utiliser un enrichissement 
plus complexe 
<LineBreak/> 

Le TextBlock suivant utilise une decoration au milieu du caractere. Le trait est 
rouge et d'une epaisseur de 2 points. 

<TextBlock> 

<TextBl ock .TextDecorati ons> 

<TextDecoration Location="Strikethrough"> 
<TextDecorati on . Pen> 

<Pen Brush="Red" Thickness="2"/> 
</TextDecorati on . Pen> 
</TextDecoration> 
</TextBl ock. TextDecorati ons> 
comme du barre colore 
</TextBlock> 
<LineBreak/> 

Le TextBlock suivant utilise une decoration sous le caractere. Le trait est bleu 
et toujours d'une epaisseur de 2 points. 



Le guide du codeur • 35 



Fonctionnalites de base 

V 



<TextBlock> 

<TextBl ock .TextDecorati ons> 

<TextDecoration Location="Underl ine"> 
<TextDecorati on . Pen> 

<Pen Brush="Blue" Thickness="2"/> 
</TextDecorati on . Pen> 
</TextDecoration> 
</TextBl ock . TextDecorati ons> 
comme un soulignement en bleu 
</TextBl ock> 
<LineBreak/> 



Le TextBlock suivant utilise une decoration juste sous le caractere. Le trait est 
noir et d'une epaisseur de 1 point. 



<TextBlock> 




<TextBl oc k . TextDecorati ons> 




<TextDecoration Location ; 


="Baseline"> 


<TextDecorati on . Pen> 




<Pen Brush="Black" 


Thickness="l"/> 


</TextDecorati on . Pen> 


</TextDecoration> 




</TextBl ock . TextDecorati ons> 


comme une fine ligne sous 1 


es caracteres 


</TextBl ock> 




<LineBreak/> 





Le TextBlock suivant utilise une decoration au-dessus du caractere. Le trait est 
rouge et d'une epaisseur de 2 points. 

<TextBlock> 

<TextBl ock .TextDecorati ons> 

<TextDecorati on Locati on="0verl_i ne"> 
<TextDecorati on . Pen> 

<Pen Brush="Red" Thickness="2"/> 
</TextDecorati on . Pen> 
</TextDecoration> 
</TextBl ock . TextDecorati ons> 
ou encore une ligne au dessus 
</TextBlock> 
<LineBreak/> 

Le TextBlock suivant utilise plusieurs decorations. Une premiere juste sous le 
caractere. Le trait est rouge, d'une epaisseur de 1 point et discontinu. La 
seconde est sous le caractere. Le trait est bleu, d'une epaisseur de 1 point et est 
continu. Les deux ensembles realisent un double trait specifique. 
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<TextBlock> 

<TextBl ock .TextDecorati ons> 

<TextDecoration Location=" Basel ine"> 
<TextDecorati on . Pen> 

<Pen Brush ="Red" Thickness="l"> 
<Pen.DashStyle> 

<DashStyle Dashes="l"/> 
</Pen.DashStyle> 
</Pen> 
</TextDecorati on . Pen> 
</TextDecoration> 

<TextDecoration Location="Underl ine"> 
<TextDecorati on . Pen> 

<Pen Brush="Bl ue" Thickness="l"/> 
</TextDecorati on . Pen> 
</TextDecoration> 
</TextBlock.TextDecorations> 
Bien sur vous pouvez mel anger ces options 
et utiliser 
</TextBlock> 
<LineBreak/> 



Ce dernier TextBlock utilise une decoration sous le caractere. Le trait est d'une 
epaisseur de 4 points et d'un degrade allant d'un bleu leger a un bleu fonce. 

<TextBlock> 

<TextBl ock .TextDecorati ons> 

<TextDecoration Location="Underl ine"> 
<TextDecorat i on . Pen> 
<Pen Thickness="4"> 
<Pen.Brush> 

<LinearGradientBrush> 
<Li nearGradi entBrush 
.GradientStops> 
<GradientStop 
Color="LightBlue" 
Offset="0"/> 
<GradientStop 
Color="DarkBliie" 
Offset="l"/> 
</Li nearGradi entBrush 
.GradientStops> 
</Li nearGradi entBrush> 
</Pen.Brush> 
</Pen> 
</TextDecorati on . Pen> 
</TextDecoration> 
</TextBl ock. TextDecorati ons> 
ou encore d 1 utiliser des degrades 
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</TextBlock> 
<LineBreak/> 
<LineBreak/> 

Les possibilites sont infinies ! 
</TextBlock> 
</StackPanel> 
</Page> 



QUI® 



| * Auto Parse] ► Refresh $ Col 



Non seulement vous pouvez utiliser I'enrichissei 

comm e du borr e co l or e 

rommp un soulignempnt pn blpti 
rnmmp imp finp liqnp qnn^ Ips rarartprpq 
ou encore une ligne au dessus 

Rjpn qnr vous pnnvp7 mplanqpr rps option'; pf ntilispr 
on encore rfntiligpr Hps Hpnradps 

Les possibilites sont infinies ! 



Eien aur vous poovez xelanger cea option 
</Tex-:Eloc:o 



Done. Markup saved tc "C:\Program Files\Microsoft SDKs\Windows\vl.O\Bin 
\XamlPad_5aved.xamr. 



< Figure 2-1 6 : 

Utiliser des 
decorations 



Notez au passage l'utilisation de la balise LineBreak pour provoquer un passage 
a ligne impose. 



yDans I'exemple, vous aurez pu constater la presence d'un degrade ; 
Renvoi SI vous souhaitez en savoir plus sur cette fonctionnalite, elle est 
traitee au chapitre Creer un style page 229. 



2.2 Introduire du texte 

Le controle TextBox est, avec le Label, probablement le plus utilise. II est aussi 
un des plus simples. Le code suivant va deja nous permettre d'obtenir un 
TextBox tout a fait fonctionnel. 

<TextBox Name="txtl\lom" /> 
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• XamlPad 0(5)(5<f 



| * Auto Parse ► Refresh ? 100% 

Je peux utiliser un text Box 



<Page 

xmin3="hrtp : t fscbewAS .Microsoft . coa/vinf 
xmlna : x="ht-p : I ■■ schema* .xicrcacf- . ocm/vX 
<SuekPaMl> 

<TextBex Name="rxuNcm" /> 
</SzaclcPanel> 
</Page> 



Done. Markup saved to C:\Program Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



-4 Figure 2-17 

bolte de texte 



Une 



Nous pouvons appliquer a ce controle tout ce que nous avons deja vu pour le 
controle Label. 



^ Appliquer des marges 

Pour une question de lisibilite et de mise en page, je vous conseille d'appliquer 
systematiquement des marges a vos centrales de type TextBox. 



iei^ 



<TextBox Name="txtNom" Margin="3,3,3,3" /> 



BBS 



Le TextBox avec des marges 



<Eage 

xmln3="http: f / a chema 3 .■lCTOOOX't . BOH/wiOf 
xmlna : x="http : t f\u 1i( win .xicrcscf ~ . csm/wl 
<ScacJcPanel> 

<TextBcx TTnT "flTllfT" Margi 
</SraclcPanel> 
</Page> 



Done. Markjp saved to C:\Program Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



<4 Figure 2-18 : Un 

TextBox avec marges 
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L'attribut MaxLength va nous permettre de limiter l'encodage. Ce qui est bien 
pratique quand le contenu doit etre enregistre dans une base de donnees. Vous 
evitez ainsi une perte d' information a l'insu de l'utilisateur ou des problemes 
plus tard dans le code. 

L'attribut Character-Casing limite lui aussi l'encodage en imposant automati- 
quement le texte en majuscule (valeur Upper) ou en minuscule (valeur Lower). 
J'aurais egalement apprecie la possibilite de forcer la premiere lettre en 
majuscule et les autres en minuscules mais, actuellement, ce n'est pas prevu. 

<TextBox Name="txtNom" Margin="3,3,3,3" 
MaxLength="20" CharacterCasing="Upper" /> 



• XamlPad 




| * ' Auto Parse ( ► Refresh 


100% - R 


BAEYENS JEAN-ALAIN | 




<Fage 






xmln3="r.-tp : ■ srr.eT.a3 .mzrcszl 






xmlns : >:="ht tc : ? r-he^as .rr.ir.r 2 = 






<3tacjcr : ar.el> 






<Text5cx Kar.e="tx* 












</StackPanel> 






</Page> 












< 


a 




Done. Markup saved to C:\Program Rles\Miorosoft SDKs 




\Windows\vl.O\Bin\XamlPad_Saved.xaml. 







< Figure 2-1 9 : 

Majuscules imposees 



Un TextBox peut egalement etre multiligne. Dans ce cas, vous aurez la 
possibilite d'ajuster son utilisation avec les attributs AcceptsReturn, AcceptsTab 
et TextWrapping. 

L'attribut AcceptsReturn autorise ou non l'utilisation du passage a la ligne 
impose (touche [Entree I ). L'attribut AcceptsTab autorise ou non l'emploi de la 
tabulation. 



^xarque 

□eplacement par tabulations 

Si vous autorisez l'utilisation de la tabulation, elle ne pourra evidemment plus 
etre utilisee pour passer au champ suivant. Toutefois, mais il faut le savoir, la 
combinaison fctiT]+ |Tab | remplit aussi cette fonction. 
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L'attribut TextWrappi ng determine le comportement du controle quand le texte 
frappe arrive en bout de ligne. Les valeurs possibles sont NoWrap, Wrap et 
WrapWi thOverf 1 ow. Cette derniere va non seulement provoquer un passage a la 
ligne automatique mais, contrairement a Wrap, egalement etendre vers le bas la 
zone prevue initialement. 

<TextBox Name="txtNom" Margin="3,3,3,3" 
MinHeight="80" AcceptsReturn="True" 
AcceptsTab="True" TextWrappi ng="WrapWithOverf low" /> 



QUE 



* Auto Parse ► Refresh 



Un controle de Type TextBox peut parfaitement contenir 
plusieurs lignes. II ccepte le passage a la ligne automatique 
mais egalement le passage a la ligne impose avec "return". 

II peut aussa jtiliser la tabulator 



Done. Markjp saved to C:\Program Files\Micrcsc^t SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



<Page 

xmlns="http: f /scheraaa.micrQscft.ccm/winf 
xmlns : x-"http: / /schema* .Microsoft . ooa/vi 
<Stac;jcPariel> 

<TextBoi Kame="txtH=x" Hargi 
MinHeigJit»"20" AcceptsRetur 
Accepi37at="True" Tex-Krapp 
</StackPanel> 



< Figure 2-20 : 

Tabulation dans un 
TextBox 



Dans l'exemple ci-dessus, le texte arrive sur la derniere ligne. Si d'aventure 
nous continuons la frappe, vous pouvez constater l'effet de WrapWi thOverf low. 



Un controle de Type TextBox peut parfaitement contenir 
plusieurs lignes. II ccepte le passage a la ligne automatique 
mais egalement le passage a la ligne impose avec "return". 

II peut aussj jtiliser la tabulation. Et si o'aventure le 
texte devient plus long, la taille peut augmenter 
ajtoma:ique-nent. 



<i-age 

xmln3-"}:trp: f /acheiuaa .Microsoft- com/vinf 
xmln3 : x-"http : / /schema* .ancrcacf- . com/vi 
<Stack:Far;el> 

<TextBox Najne-"rxtNrm" Margi 
MinHeigli'c»' , SO" AcceptsRetur 
A-oept =7afc=*"True" TexrWrapp 
</Srac)rPanel> 



Done. Markjp saved to C:\Program Files'iKicrcsc^t SDKs 
\Windows\vl.O\Bin\XarnlPad_Saved.xaml. 



< Figure 2-21 : 

Zone de debordement 
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^ Combiner la zone de debordement et la hauteur maxlmale 

Si vous utilisez I'option WrapWithOverflow, il est preferable de fixer une taill 
maximale en utilisant I'attribut MaxHeight. 



ille^ 



^arque 

f Gestion des lignes 

Comme vous pouvez le remarquer, rien n'indique qu'il s'agisse ou non d'un 
TextBox multiligne. En fait, un TextBox a toujours les capacites multiligne mais, 
si vous n'autorisez ni le passage automatique a la ligne [Wrap] ni le retour a la 
ligne impose, I'encodeur ne pourra pas creer de seconde ligne. Le TextBox est 
capable de faire defiler le texte aussi bien horizontalement que verticalement 
quand cela est necessaire. 



Les attributs MinLines et MaxLines sont une bonne alternative a l'utilisation des 
attributs MinHeight et MaxHeight. MinLines et MaxLines fixent respectivement le 
nombre minimal et maximal de lignes visibles. La taille sera automatiquement 
adaptee en fonction. De cette facon, la derniere ligne visible sera toujours 
complete, ce qui n'est pas le cas en fixant les limites de la hauteur en nombre 
de points. 

<TextBox Name="txtNom" Margin="3,3,3,3" 
MinLines="2" MaxLines="3" 
AcceptsReturn="True" AcceptsTab="True" 
TextWrapping="Wrap" /> 

Selon les comportements que vous aurez definis pour votre TextBox, l'utilisa- 
teur sera oblige de faire defiler le texte horizontalement et verticalement. Sans 
aide visuelle, il n'est pas toujours aise pour l'utilisateur de voir le texte cache. 
Le mieux dans ce cas est d'ajouter des barres de defilement. A vous de choisir 
celle qu'il vous faut. 

<TextBox Name="txtl\lom" Margin="3,3,3,3" 
MinLines="2" MaxLines="3" MaxWidth="300" 
AcceptsRetum="True" AcceptsTab="True" 
TextWrapping="NoWrap" 
Verti cal Scrol 1 BarVi si bi 1 i ty="Vi si bl e" 
Hon' zontal Scrol 1 BarVi si bi 1 i ty="Vi si bl e" /> 
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2 
3 



<Text5cx Name="txtHonr Margi 
/:ir.Lir.a5="2" ::axlir.ea="3" [■: 
ficceptsReturn-Trne'' Accept 
TexrWrappm5="t"cWrap'* 



VerricalScr:li5ar'*i3ibLlit J 
HcrizaritalSrrcliBarYisifcili 



</SrackPanel> 



< 



> 



Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl.0\Bin\XamlPad_5aved.xarnl. 



Figure 2-22 : 

Defilement dans un 
TextBox 



Les valeurs possibles pour les attributs VerticalScrollBarVisibility et 
Horizontal Scroll Bar-Visibility sont Auto, Hidden, Disabled et Visible. 

0^^^. Pour plus d' informations sur ['utilisation des valeurs possibles, reportez- 
Renvoi vous au paragraphe Autoriser le defilement page 77. 

^ention ^^^^^ ^^^^^^^^^^^^^^^^ 

^" Conflit entre hauteur et nombre de lignes 

Si vous utilisez simultanement les attributs MinLines, MaxLines et les attributs I 
MinHeight, MaxHeight, ce sont ces derniers qui auront la preseance. MinLines I 
et MaxLines n'auront des lors aucun effet. J 



Dans certaines circonstances, vous souhaiterez certainement afficher un TextBox 
mais sans autoriser l'utilisateur a en modifier le contenu. Pour ce faire, vous 
disposez de deux possibilites, soit utiliser l'attribut IsReadOnly, soit utiliser 
l'attribut IsEnabled. Chacune de ces methodes offre ses avantages et ses 
inconvenients. 

Voyons d'abord l'effet de IsReadOnly. 

<TextBox Name="txtNom" Margin="3,3,3,3" 
Text="Ce texte est en lecture seule." 
IsReadOnly="True" /> 
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Ce texte est en lecture seule. 



<TexrEcx Nane>"txtNoB" Hargi 

IsReadOnlyw'Tzue" f> 
</StackPasel> 



Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



Figure 2-23 : Un 

TextBox en lecture 
seule 



Visuellement, il n'y a aucune difference entre un TextBox limite a la lecture et 
un autre TextBox. Toutefois, il ne vous sera pas possible d'introduire du texte 
dans ce controle. En revanche, vous pourrez selectionner du texte pour faire un 
copier en vue de le coller ailleurs. 



^arque 

Valeur par defaut 



II est difficile de concevoir une TextBox non modifiable sans valeur par defaut. 
Pour donner cette valeur, vous devez utiliser I'attribut Text. 



En revanche, avec I'attribut IsEnabled, l'utilisateur visualise directement que le 
champ est inaccessible. 

<TextBox Name="txtNom" Margin="3,3,3,3" 
Text="Ce texte est en lecture seule." 
IsEnabled="False" /> 

Cette technique a toutefois deux defauts. Premierement, il n'est pas possible de 
selectionner du texte en vue de le copier ailleurs. Deuxiemement, beaucoup 
d'utilisateurs se plaignent du manque de lisibilite des TextBox desactives. 

Vous pouvez modifier les attributs de couleur de votre TextBox pour qu'il 
affiche visuellement son etat soit en copiant le style d'un TextBox desactive, soit 
en utilisant votre propre charte graphique. 
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| ([] Auto Parse j ► Refresh 



exte est en lecture seule. 



eft 



<jtaciftanej.> 

<Text3c:x Name="rxtMox" Margi 
Texr="C= rex.e e.=: er. 
Zalnafcled-Talse" /> 
</ Srac]cPanel> 
</Page> 



< 



Done. Markup saved to C:\Program Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xarnl. 



Figure 2-24 : Un 

TextBox desactive 



Dans cet exemple, le style du champ en lecture seule est proche du style du 
champ desactive tout en etant plus lisible. 

<TextBox Name="txtNom" Margin="3,3,3,3" 

Text="Ce texte est en lecture seule." 

IsEnabled="False" /> 
<TextBox Name="txtNom2" Margin="3,3,3,3" 

Text="Ce controle est en lecture seule." 

IsReadOnly="true" 

Foreground="Gray" Background="Beige" /> 



1 1 ' " Auto Pars 



Ce Terte est en 



Ca controle est er lecture seu e. 



<IeKt2=x NaTie="rxtMcx2" Marg 
7ext="Ce controle eat en 1 
IsReadCniy="':rue*' 
Faregrau:ia="'3ray" 3ackgro - j 
</StacfcPanel> 



Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl .0\Bin\XamlPad_Sa ved .xa ml . 



< Figure 2-25 : 

TextBox desactive ou 
en lecture seule 
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^uce 

^" Introduire un mot de passe 

Si vous desirez creer une zone de saisie pour introduire un mot de passe, 
utilisez la balise PasswordBox en lieu et place de TextBox. II n'y a pas de 
difference majeure dans leur utilisation si ce n'est que les caracteres affiches 
sont remplaces par des * et que la propriete Text est remplacee par la 
propriete Password. 



2.3 Creer un bouton 

Le bouton est egalement un controle indispensable, ne serait-ce que pour les 
celebres boutons OK et Annuler. 

Comme pour le Label , vous pouvez l'utiliser selon deux variantes legerement 
differentes. 

<Button Name="btnOk" 
Width="80" Height="30" > 
Ok 

</Button> 

<Button Name="btnCancel " Content="Annuler" 
Width="80" Height="30" /> 




</3utton> 

<3u"cn iraxe="fctnCancel 
</Stack-Panel> 



</Paae> 
• 



Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl.O\Bin\XarnlPad_Saved.xaml. 



< Figure 2-26 : 

Affichage de simples 
boutons 
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^* Fixer la taille des boutons 

Generalement, la taille des boutons presentes dans un meme ecran est fixe. N 
pas respecter cette regie produit le plus souvent un tres mauvais effet visuel 



Ne 



De maniere generale, le bouton OK sera presente comme bouton par defaut. De 
meme maniere, le bouton Annuler devrait etre associe a la touche |Echap] . Pour 
qu'un bouton soit le bouton par defaut, il suffit d'utiliser l'attribut IsDefault. 
Pour associer un bouton a la touche |Echap] , il suffit d'utiliser l'attribut 
IsCancel . 

<Button Name="btnOk" IsDefault="True" 
Width="80" Height="30" > 
Ok 

</Button> 

<Button Name="btnCancel " Content="Annuler" 
Width="80" Height="30" IsCancel ="True"/> 

Nous devons encore pouvoir associer le bouton avec une action bien definie. 
Toutefois, cette operation faisant appel a du code .NET, nous reviendrons 
dessus dans le chapitre sur les evenements (page 138). 



2.4 Afficher un cadre 

Comme nous l'avons vu precedemment, certains controles possedent leurs 
propres attributs pour realiser un cadre autour d'eux. Ce n'est toutefois pas le 
cas de tous. Le controle Border est la pour pallier ce probleme. Ce controle est 
en definitive tres couramment utilise. II permet de creer des cadres partout oil 
vous en avez besoin. 

<Border Background^ 1 Li ghtBl ue" BorderBrush="DarkBl ue" 
BorderThickness="2" Width="200" Height="100"/> 




< Figure 2-27 : 

Creer un bord 
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Si vous souhaitez arrondir les coins, il suffit d'utiliser l'attribut CornerRadi us. 

<Border Background="LightBl ue" BorderBrush="DarkBl ue" 
BorderThickness="2" Width="200" Hei ght=" 100" 
CornerRadi us="20"/> 



• XamlPad 



| Auto Parae j ► Refresh 0 . 100% 


r > 






V J 






<Page 

xmlna="http: / /a enemas .microsoft . ccra/vinf 
xmln3 : x="http : f /s enemas .microsoft . com/wi 
<5order EacJegrcund="LigntErj 
5orderTr.iok'nes3="2" Kidth=" 
CornerRadius="20*V> 

</Page> 


v 


< 


> 




Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl.0\Bin\XamlPad_5aved.xaml. 



< Figure 2-28 : Bord 
a coins arrondis 



2.5 Afficher une image 

Les images peuvent etre utiles soit pour ameliorer la presentation soit pour 
diffuser de l'information telle qu'une photo. Pour afficher une image avec 
XAML, nous utiliserons la balise Image. 

<Image Name="imgPhoto"> 
<Image.Source> 

C:\Documents and Setti ngs\Al 1 Users\Documents\ 
Mes images\Echanti lions d'images\Hiver.jpg 
</Image.Source> 
</Image> 
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Sr Erreur dans le code 

Le contenu de la balise Image est volontairement scinde en deux lignes pour une 
question de lisibilite de I'exemple. Toutefois, si vous desirez le reproduire, il sera 
necessaire de regrouper le chemin du fichier sur une meme ligne. 



Le nceud fils ImageSource permet de definir le fichier qui sera affiche. 

Les formats supportes sont bmp, gif, ico, jpg, png et tiff. 

Vous pouvez egalement fixer les dimensions de 1' image avec les differents 
attributs MinWidth, MaxWidth, MinHeight, MaxHeight ou encore, comme dans 
I'exemple ci-dessous, en faire une miniature en utilisant les attributs Width et 
Height. 

<Image Name="imgPhoto" 
Width="100" Height="100" > 
<Image.Source> 

C:\Dociiments and Setti ngs\Al 1 Users\Documents\ 
Mes images\Echanti lions d'images\Hiver.jpg 
</Image.Source> 
</Image> 
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■aiaia 



|f"; Auto Parse { > Refresh 





ffldtll-"lOt)" :-:-ig!r;«";: 



> 



< Image. Sour oe> 

C:\Dccjments ana 
</Image.Source> 
</Image> 
</S-:ack'Panel> 



</Page> 



v 



< 



> 



Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windoivs\vl.O\Bin\XamlPad_Saved.xaml, 



Figure 2-30 : 

Afficher une miniature 



II existe une seconde possibility pour afficher des images mais il s'agit alors 
non pas directement d'un controle a placer dans votre page mais d'une image 
utilisee dans un controle ; par exemple inserer l'image comme fond d'un 
bouton, d'un cadre ou d'une page. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 



<Page . Background> 

<ImageBrush ImageSource="...\Emoticons\no.gif" /> 
</Page . Background> 
<StackPanel> 

<Label> 

Une fenetre avec une image de fond 
</Label> 
</StackPanel> 
</Page> 
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Afficher une image 



2 



* XamlPad 



Hum 



| f Auto Parse ► Refresh . 100% 



Une fenetre avec une 




<Label> 
< 



Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl.O\Bm\XamlPad_Saved.xaml. 



< Figure 2-31 : 

Afficher une image 
comme fond de page 



ImageBrush dispose d'attributs tout a fait particuliers pour gerer l'apparence de 
l'image. II n'est pas question de taille puisque celle-ci depend du conteneur. En 
revanche, il est toutefois possible de controler la taille relative en utilisant 
l'attribut Viewport. Si vous l'associez a TileMode, vous pouvez par exemple 
creer une mosaique. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 

> 

<Page . Background> 

<ImageBrush Vi ewport= "0 . 5,0.5,0.5,0.5" 
TileMode="TILE" 

ImageSource="...\Emoti cons\no.gif" /> 
</Page . Background 
<StackPanel> 
<Label> 

Une fenetre avec une image de fond 
</Label> 
</StackPanel> 
</Page> 
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Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



■< Figure 2-32 : 

Afficher une mosaTque 
comme fond de page 



II est aussi possible de parametrer retirement de 1' image et son alignement en 
utilisant les attributs Stretch, Al ignmentX.et AT i gnmentY. 

<Page 

xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 

> 

<Page . Background> 

<ImageBrush Stretch="None" 
Al ignmentY="Bottom" 
AlignmentX=" Right" 
ImageSource="...\Emoti cons\no.gif" /> 
</Page . Background> 
<StackPanel> 
<Label> 

Une fenetre avec une image de fond 
</Label> 
</StackPanel> 
</Page> 
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| {[] Auto Parse j ► Refresh Ji - 100% 

Une fenetre avec une image de fond 




<Faae 






xmlns«"h"'cp: / .'scr.exaa .mcr 






xmlns : x="a"f : / schema s .xi 












> 






<Fage .3acJcground> 






<Image3rush Stretch="Kone" 












<j — • 


> 











Done. Markup saved to C:\Program Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xarnl. 



< Figure 2-33 : 

Afficher une image 
non etiree 



2.6 Checklist 

Voici les points essentiels que nous avons abordes dans ce chapitre : 

■ l'affichage des textes et leurs manipulations avec des Label et TextBlock ; 

■ l'affichage et la saisie des textes avec TextBox ; 

■ la saisie d'un mot de passe avec PasswordBox ; 

■ l'affichage des boutons avec Button ; 

■ l'affichage des images avec Image et ImageBrush ; 

■ la realisation de cadres avec Border ; 

■ l'utilisation des attributs les plus communs et utilisables avec la majorite 
des controles ; 

■ l'utilisation des decorateurs avec TextDecoration. 
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Disposer les elements a I'ecran 

v 



Avec les controles vus au chapitre precedent, nous possedons assez d' elements 
pour realiser un ecran complet et complexe. Ce qui nous manque maintenant, 
c'est une methode pour organiser tout cela. XAML ne se contente pas d'une 
methode mais nous en fournit plusieurs, chacune ayant ses avantages et ses 
inconvenients. 



3.1 Utiliser les coordonnees 

L'utilisation de Canvas est la methode la plus proche de la technique utilisee 
avec les anciens API. Si vous avez deja programme sous Windows, vous savez 
certainement que les controles etaient positionnes relativement au coin supe- 
rieur gauche de la fenetre. Pour positionner les controles dans un Canvas, c'est 
pareil. 

Comme premier exemple, placons dans un ecran des etiquettes et des boites de 
texte pour pouvoir introduire le nom, le prenom et l'adresse d'une personne. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<Canvas> 

<Label Name="lblNom" Canvas. Top="10" 
Canvas. Left="10"> 

Norn 
</Label> 

<TextBox Name="txtNom" Canvas. Top=" 10" 

Canvas. Left="80" 

Width="150" MaxLength="30" 

CharacterCasing="Upper" /> 
<Label Name="lbl Prenom" Canvas. Top="10" 

Canvas. Left="240"> 

Prenom 
</Label> 

<TextBox Name="txtPrenom" Canvas. Top="10" 

Canvas. Left="300" 

Width="130" MaxLength="30"/> 
<Label Name="lblAdr" Canvas. Top="40" 

Canvas. Left="10"> 

Rue 
</Label> 

<TextBox Name="txtAdr" Canvas. Top="40" 

Canvas. Left="80" 

Width="350" MaxLength="80"/> 
<Label Name="lblCP" Canvas. Top="70" 

Canvas. Left="10"> 

Code postal 
</Label> 
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<TextBox Name="txtCP" Canvas. Top="70" 

Canvas. Left="80" 

Width="50" MaxLength="5"/> 
<Label Name="lbl Local ite" Canvas. Top="70" 

Canvas. Left="150"> 

Localite 
</Label> 

<TextBox Name="txtLocalite" Canvas. Top="70" 
Canvas. Left="200" 
Width="230" MaxLength="50"/> 
</Canvas> 
</Page> 



Ulnjlx. 



I' Auto Parse > Refresh g, , \t^T 



Hot 






Hue 








Locafite 





<Canvas> 

<Latel i:axe="lblKam" Canvas . Tcp="lC" 
Canvas. Lsf":»"10"> 

Ma 

</Labei> 

<Text5ox l"ame="txrllrm" Can-as. T=E="L 
Canvas . lef--" BQ " 



Done. Markup saved to C:\Program Files\Microsoft 5DKs\Windows 
\ul.O\Btn\XamlPad_Saved.xaml. 



Figure 3-1 : 

Presentation avec un 
Canvas 



Comme vous pouvez le constater, le placement a l'ecran se fait au moyen des 
attributs Canvas. Top et Canvas. Left. II s'agit de proprietes attachees. Une 
propriete attachee est en fait une propriete du parent, ici du Canvas, mais pour 
laquelle chaque enfant peut assigner une valeur differente. C'est pourquoi, bien 
que propriete de Canvas, l'attribut Canvas. Top est par exemple un attribut des 
elements contenus dans le Canvas et non du Canvas lui-meme. 

La balise Canvas dispose elle-meme de quelques attributs. 

L'attribut Background vous permet de changer la couleur du fond si la couleur 
standard ne vous satisfait pas. 

<Canvas Background="LightCoral "> 
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<Latei UM-"lblliai" Canvas . T=p=' 
Car."a2.1s:-="'i:"> 

Hon 

</Mbd> 

<TcxtBos — W"r ITWiM" Canvas. T03 

Canvas. Lefc""3C" 

Ki3cn="15:" HaxL-ngxh="3:" 

Chara:T;erCa3ing="Upp-r" /> 
<Lafcel K=xe»"ltlPrsncm" CkBV».T( 

Canvas-. lefc«"240"> 
Fren^m 
</Label> 



Done. Markup ssvec to Zi'^rcg-an Files icrcsc't SDKs'.WirCMS 
\vl.0\Hn\XamlPad_5aved.xaml. 



^ Figure 3-2 : La 

couleur du fond d'un 
Canvas 



Un autre attribut interessant est l'attribut IsEnabled. En effet, si vous lui 
assignez la valeur False, 1' ensemble des controles contenus dans le Canvas 
seront eux aussi desactives. 



□esactive et non lecture seule 

N'oubliez pas toutefois les differences que nous avons vues precedemment 
entre desactiver et lecture seule pour un controle tel que la bolte de texte 



<Canvas IsEnabled="False" Background="LightCoral "> 



□0S 



] Auto Parse ^ Refresh 



<Canvas IsEnablsd-Talae" B»dBgromrt»"l 
<Laiel rill "IMTTini* Canvas. Icp="LC' 
Car.-a; .lsf-="i:"> 

Hon 
</Label> 

<Text3cx W— ~l llHlW~ Canvas. Top=": 

Canvas ,Left""8C" 

Width="15C" KaxLengxh="30" 

Chara=-erCasin3=" T Jpper" i> 
<Latel ::=xe-"ltlFrencir." Canvas. ~;p-' 

Canvas. lefc«"240"> 

</Labe"> 



Done. Markup saved to Optogram Files\Microsoft SOKS\WinOows 
\vl.0\Bin\XamlPad_5aved.xaml. 



< Figure 3-3 : Un 

Canvas desactive 



58 • Le guide du codeur 



Utiliser les coordonnees 



Les attributs Canvas. Top et Canvas. Left ne sont pas les seuls utilisables pour 
positionner un controle. Vous pouvez egalement utiliser Canvas. Right et 
Canvas. Bottom, ce qui permet de placer un controle relativement a n'importe 
quel coin du Canvas. 

Ajoutons le code suivant devant la balise de fin du noeud Canvas. 

<Border Width="100" Height="120" BorderThickness="l" 
Background= "White" BorderBrush="Black" 
Canvas . Top= "10" Canvas . Ri ght= " 10"> 
<TextBlock Name="blkPhoto" 
VerticalAl ignment="Center" 
Hori zontal Al ignment="Center" 
FontSize="20"> 
Photo 
</TextBlock> 
</Border> 

<Label Name="lblCopyn'ght" Canvas. Bottom="10" 
Canvas. Ri ght=" 10" 

Content="Micro Application 2006" /> 



W XamlPad 



| f ] Auto Parse", ► Refresh 




Photo 



n2riz2ritsl--.lirrjr=r.t=" Ter.ier " 
Font5iit-'*20"> 
Phorc 
</TextBl0Cfc> 
</5order> 

<Lafcel Kame="lfclCcpyright" Canvas .Ecrtom= , *lD" 
Canvas .Right— "10" 

Content="Micrc Application 2006" /> 
</Canvas> 



Done. Markup saved to C:\Program Rles\Microsoft 5DKs\Windows 
\vl ,0\Bin\Xam lPad_Saved .xam! . 



< Figure 3-4 : Un 

Canvas avec 
differents points de 
reference 
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XamlPad 



□0® 



| >" ] Auto Parse [ ► Refresh - | fro 1 /. 



Phorc 
</TextBlcci> 
</5order> 

<Lafcel Kame="lfclCC'Fyri5ht" Canvas .Ecttom="* 
Canvas . Right="13" 

Contenr="Micrc Application 2006" /> 
</Canvas> 



Done. Markup saved to C:\Program Rles\Microsoft SDKs\Windows 
\vl.O\Btn\XamlPad_Saved.xaml. 



Figure 3-5 : Le 

meme Canvas agrandi 



Comme vous pouvez le constater, le fait de positionner un controle non pas a 
partir du coin superieur gauche mais d'un autre coin ne fait pas que changer le 
systeme de coordonnees. Lors du redimensionnement de I'ecran, les controles 
suivent le coin a partir duquel ils sont positionnes. Cette faculte pourra etre 
utilisee dans de nombreuses circonstances pour obtenir un ecran beaucoup plus 
flexible. 



^uce 

7 Fixer une taille minimale a son Canvas 

Si vous ne fixez pas une taille minimale a votre Canvas, les elements contenus 
vont inevitablement se chevaucher si la fenetre est reduite au-dela de la taille 
critique. 



us 
lie 



En remplacant la balise Canvas dans l'exemple par celle ci-dessous, nous 
empecherons ce comportement chaotique. 

<Canvas Background="LightBl ue" 
MinWidth="550" 
MinHeight="200"> 
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3.2 Utiliser une grille 

Cette methode est generalement la methode la plus recommandee car elle offre 
un tres haut niveau d'adaptabilite du contenu de l'ecran a sa taille et done 
egalement aux changements de resolution. Elle est toutefois plus complexe a 
mettre en ceuvre. 

L'idee est de placer un controle par cellule de la grille. II y a done lieu de bien 
definir la grille pour obtenir le resultat voulu. Essayons de reproduire l'exemple 
precedent mais avec la balise Grid au lieu de Canvas. 

L'objectif de l'utilisation d'une grille etant une plus grande adaptability, nous 
ne fixerons pas la taille des controles. 

Si nous etudions l'ecran tel qu'il est desire, nous pouvons en deduire qu'il 
necessite 4 lignes et 5 colonnes. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<Grid> 

La premiere chose a faire lorsque Ton utilise une grille, e'est de definir les 
lignes et les colonnes. 

<Gri d . Col umnDef i ni ti ons> 

<ColumnDefinition /> 

<ColumnDefinition /> 

<ColumnDefinition /> 

<ColumnDefinition /> 

<ColumnDefinition /> 
</Gri d . Col umnDef i ni ti ons> 
<Gri d . RowDef i ni ti ons> 

<RowDefinition /> 

<RowDefinition /> 

<RowDefinition /> 

<RowDefinition /> 
</Gri d . RowDef i ni ti ons> 

Nous pouvons ensuite utiliser les controles tout en definissant leurs positions 
dans la grille en utilisant Grid. Row et Grid. Column. 

<Label Name="lblNom" Grid.Row="0" Grid.Column="0"> 

Norn 
</Label> 

<TextBox Name="txtNom" Grid.Row="0" Grid. Col umn="l" 
MaxLength="30" CharacterCasing="Upper" /> 
<Label Name="lblPrenom" Grid.Row="0" Grid.Column="2"> 
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Prenom 
</Label> 

<TextBox Name="txtPrenom" Grid.Row="0" Grid.Column="3" 
MaxLength="30"/> 

<Label Name="lblAdr" Grid.Row="l" Grid.Column="0"> 

Rue 
</Label> 

<TextBox Name="txtAdr" Grid.Row="l" Grid. Col umn="l" 
MaxLength="80"/> 

<Label Name="lblCP" Grid.Row="2" Grid. Col umn="0"> 

Code postal 
</Label> 

<TextBox Name="txtCP" Grid.Row="2" Grid. Col umn="l" 
MaxLength="5"/> 

<Label Name="lbl Local ite" Grid.Row="2" Grid. Col umn="2" > 

Localite 
</Label> 

<TextBox Name="txtLocalite" Grid.Row="2" Grid. Col umn="3" 
MaxLength="50"/> 

<Border BorderThickness="l" Background="White" 
Grid.Row="0" Grid. Col umn="4" BorderBrush="Black"> 
<TextBlock Name="bl kPhoto" Vertical Alignment="Center" 
HorizontalAl ignment="Center" FontSize="20"> 

Photo 
</TextBlock> 
</Border> 

<Label Name="lblCopyright" 
Content="Micro Application 2006" 
Grid.Row="3" Grid. Col umn="4"/> 
</Grid> 

</Page> 

Comme vous pouvez le constater, la definition de la grille se fait au debut en 
utilisant les collections RowDefinitions et Col umnDefinitions. Ces collections 
contiennent autant d'elements que de lignes ou de colonnes desirees. 

A la place des attributs Canvas. Top et autre Canvas. Left, ce sont les attributs 
Grid. Column et Grid. Row. 



^ention 

X Debut de numerotation 

La numerotation des lignes et des colonnes commence a O. La ligne 1 est done 
bel et bien la seconde ligne. 



TC^ 



Malheureusement, comme vous pouvez le voir ci-dessous, le resultat obtenu 
n'est pas vraiment a la hauteur des esperances. 
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| * ' Auto Parse ( ► Refresh 


- 100% 




Nom 


Prenom 




Photo 


Rue 








Code postal 


Localrte 












Micro Appio 


<Text3ox i;ane="rxtCr" Gr-d.?.cv="2" Grid A 
HaxLer.grh»"5"/> 
<Lafcel HNM« 1, lJ3l£ocalite" Grid.?.ov«"2" 

Lccalite 
</Label> 

<Text3ox Kane="tx , :Lccalite" Grid. Row-" 2 
HuLengt h=" 5 o " / > 
<Border BorderThickne35= n I" BacJcarcund= v 


< 






> 


Done. Markup saved to C:\Program Rles\Microsoft 5DKs\Windows 
\vl.O\Bin\XamlPad_Saved.xaml. 



Figure 3-6 : 

Affichage avec une 
grille 



Commencons par le plus simple, le fond d'ecran n'est pas colore. Pour cela, pas 
de soucis, il suffit d'utiliser le meme attribut que pour Canvas. 

<Grid Background^ 1 Li ghtBlue"> 

Autre probleme evident, la zone de saisie de l'adresse est limitee a la deuxieme 
colonne. Pour resoudre ce probleme, il est possible d'etendre le controle sur 
plusieurs colonnes en utilisant l'attribut Grid. Col umnSpan. 

<TextBox Name="txtAdr" Grid.Row="l" Grid.Column="l" 
MaxLength="80" Grid. Col umnSpan="3"/> 

II en va de meme pour la zone photo qui est limitee a une ligne. La solution est 
quasiment identique excepte que l'attribut est Grid.RowSpan. 

<Border BorderThickness="l" Background="White" 
Grid.Row="0" Grid.Column="4" Grid.RowSpan="3" 
BorderBrush="Bl ack"> 
<TextBlock Name="bl kPhoto" Vertical Al ignment="Center" 
Horizontal Al ignment="Center" FontSize="20"> 

Photo 
</TextBlock> 
</Border> 
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Avec l'ajout de ces nouveaux attributs, I'ecran est enfin un peu plus ressem- 
blant. 



| E ! Auto Parse t ► Refresh 


3 


9 |too% 


I- 


Nom 




Prenom 






Rue 




Photo 


Code postal 











Micro Applies 



<TextBcx Kane-"tx , :rrenom" Grid.Rov-" : m * 
KaxLengtb*"30"/> 

Rue * 
</Lafcel> 

<TextBoz Name="txtAdr" Grid. Row" 1" Gr: 
HaxLeng - rh=*"2 Grid. CQlurnnSpan="3"/> 

1 

Ml 



Done. Markup saved to C:\Program Rles\Microsoft SDKs\Windows 
\vl.0\Btn\XamlPad_5aved.xaml. 



< Figure 3-7 : Le 

meme exemple un 
peu plus complet 



Quelques amenagements sont encore necessaires pour parfaire le travail. 

<Label Name="lbl Copyright" 
Content="Micro Application 2006" 
Gri d . Row= "3" Gri d . Col umn= "3 " 
Grid.ColiimnSpan="2" 
VerticalAl ignment="Bottom" 
Hon' zontal Al i gnment=" Ri ght "/> 

Le code ainsi modifie va permettre de placer le copyright en bas a droite de 
I'ecran, et ce quelle que soit sa dimension comme e'etait le cas avec le canevas. 

Placez egalement l'attribut ci-dessous dans chaque balise TextBox et dans la 
balise Border. 

Margin="2,2,2,2" 



Le gros probleme restant est l'elargissement inconsidere des boites de texte, qui 
denature fortement l'effet visuel de I'ecran. Pour y remedier, il suffit d'assigner 
les attributs MaxHeight et Vertical Alignment a chaque TextBox. 



64 • Le guide du codeur 



Utiliser une grille 



Par exemple en les fixant aux valeurs suivantes : 
MaxHeight="20" Vertical Al ignment="Top" 

Pour controler le comportement de la fenetre en cas de redimensionnement, 
vous pouvez ajuster les dimensions des lignes et des colonnes. N'hesitez pas a 
utiliser les dimensions minimales et maximales. 

<Grid.Col umnDefinitions> 

<ColumnDefinition Wi dth="70"/> 

<ColumnDefinition MinWidth="60"/> 

<ColumnDefinition Wi dth="50"/> 

<Col umnDef i ni tion Mi nWi dth="60"/> 

<ColumnDefinition MinWi dth="120" MaxWidth="200"/> 
</Gri d . Col umnDef i ni t i ons> 
<Gri d . RowDef i ni ti ons> 

<RowDefinition MinHeight="22"/> 

<RowDefinition MinHeight="22"/> 

<RowDefinition MinHeight="76"/> 

<RowDefinition MinHeight="20"/> 
</Gri d . RowDef i ni t i ons> 



<$ XamlPad 


□US 


| | * Auto Parse ► Refresh <&) Ci-rier Nev 


IB 


i 








1 Rut 


Photo 




1 c=a= pMU bHie* 




<Page 






xnlr.3="r.-Tp : dtr.tj.t5 .rairr:;::-.;cT.. 


'-nfx aval 




xnu. r i3:i\=":"i- - :p : frhexas ,z.zzzzszzz - zzWvtzifx/xc 




<Grid =a.:cji:urid="li3:i-Blue"> 


<Gri 




<Cc_umnDef mirion Kidih-"7D'/> 




<C2iumnDefinlcicn Min7Jid^h="€:' 


- 


< 


m 




Done. Markup savec to C:'?rog'a~i Fi =s\vi': resist S^Ks\WircoA's\vl.C 


\Bin\XamlPad_Saved.xaml. 







■4 Figure 3-8 : 

L'exemple complet 



Redimensionnez la fenetre et voyez ce qui se passe. 

Bien sur, comme pour Canvas, vous pouvez utiliser l'attribut IsEnabled pour 
desactiver l'ensemble de la grille. 



^uce 

X Visualiser la grille 

Parfois, pour faciliter la mise en page, il est interessant de voir les limites des 
cellules. Pour cela, utilisez l'attribut ShowGridLines. 



es^ 
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En complement de ces possibilities, XAML offre la possibility de creer des 
bords mobiles pour permettre a l'utilisateur d'ajuster la taille que ce soit en 
largeur ou en hauteur. Cette possibility doit etre mise en oeuvre en utilisant un 
GridSpl itter. Cette balise va vous permettre de definir dans la grille sur quelle 
cellule ou groupe de cellules vous desirez placer la bordure mobile et dans quel 
sens. Ann de vous montrer cette fonctionnalite, nous allons construire un 
tableau de 3 lignes et 4 colonnes. La hauteur de la premiere ligne pourra etre 
adaptee ainsi que la largeur de la premiere colonne. La premiere partie du code 
est classique. Notez toutefois que 4 lignes et non 3 sont definies. Nous 
reviendrons sur le pourquoi a la fin de l'exercice. Ensuite, les 2 GridSpl itter 
sont definis. Le premier dans le sens vertical, via l'attribut 
ResizeDi recti on= "Columns", l'autre dans le sens horizontal avec 
ResizeDi recti on= "Rows". La position est donnee respectivement avec 
Grid. Column et Grid. Row. Col Span et RowSpan permettent d'etendre la visibilite 
du bord sur 1' ensemble des cellules. 



<Page 

xmlns= 

" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nfx/2006/xaml " 

> 

<Grid> 

<Gri d . Col umnDef i ni ti ons> 

<ColumnDefinition /> 

<ColumnDefinition/> 

<ColumnDefinition/> 

<ColumnDefinition/> 
</Gri d . Col umnDef i ni t i ons> 
<Grid.RowDefinitions> 

<RowDefinition/> 

<RowDefinition Hei ght="5"/> 

<RowDefinition/> 

<RowDefinition/> 
</Gri d . RowDef i ni ti ons> 

<GridSplitter Grid. Col umn="0" Grid.RowSpan="4" 
ResizeDi recti on="Columns" ShowsPreview="False"/> 
<GridSplitter Grid.Row="l" Grid.ColumnSpan="4" 
ResizeDi recti on=" Rows" Horizontal Al ignment="Stretch" 
ShowsPreview="True"/> 
</Grid> 
</Page> 
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Auto Parse , ► Refresh Courier New 



xroln3="*i*;tp: //3chems3.mic:r C3oft.com/vinfx/200 
xmlr.3 : x="http : //schexas .microscf t . ccm/winf x/2 



Done. Markup saved tc "C:\Prograr- ■ iles'.'-licrosof: SDKr-'.'.Vindc-.vstvl.O 
\Bin\X3n)?ad_Saverj.xaml". 



A Figure 3-9 : 

bords mobiles 



Les 



L'attribut ShowsPreview modifie le comportement de telle sorte que, si vous 
souhaitez la previsualisation, le bord ne bouge que quand vous lachez le bouton 
de la souris. Dans l'intervalle, c'est une ligne repere qui previsualise la future 
position du bord. 



f] Auto Parse | ► Refresh Courier New ^ 














mlos— "bttp://9Gbenaa.alcrosoft .con/winfx/200 

xmlns : x="http : / / s enemas .microscf t . ccm/winf x/2 
> 

<Grid> v 


< 


> 


Done. Markup saved to "C:\Program Files\Microsoft SDKs\ Wind ows\v 1.0 
l ' 1 Bin' i ,XaTl-ad_Sa , ved,xaml". 



< Figure 3-1 0 : Les 

bords mobiles avec 
previsualisation 



4 lignes au lieu de 3 

Maintenant, comme promis, pourquoi 4 et non 3 lignes. Comme vous avez pu 
le constater, la hauteur de la ligne a ete fixee a 5. En fait, oette astuce est 
utilisee pour pallier un comportement different entre le bord horizontal et 
vertical. Cette difference aura probablement disparu dans la version definitive et 
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^uce 

^" cette ligne supplementaire n'aura plus lieu d'etre mais, dans le doute, il vaut | 
mieux savoir comment contourner le probleme. Done, si pour un bord vertical 
celui-ci se place correctement a droite de la colonne, pour une ligne horizontale 
il n'apparaTt pas. En utilisant Horizontal Alignment= « Stretch », le bord 
devient visible mais occupe toute la hauteur. L'idee est done d'utiliser une ligne 
supplementaire pour contenir le bord ainsi cree. , 



3.3 Mettre en page avec un WrapPanel 

La mise en page avec un WrapPanel n'est pas du tout adaptee a l'exemple 
precedent. En effet, avec un WrapPanel les controles sont places a cote les uns 
des autres et sont renvoyes automatiquement a la ligne lorsque la fin de celle-ci 
est atteinte. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<WrapPanel> 

<TextBlock Width="200" TextWrapping="WrapWithOverflow" 
Margin="5,5,5,5" TextAl ignment="Justify"> 
<Bol d>WrapPanel </Bol d> 

La mise en page avec un WrapPanel n'est pas du tout 
adaptee a l'exemple precedent. En effet avec un 
WrapPanel les controles sont places a cote les un 
des autres et sont renvoyes automatiquement a la 
ligne lorsque la fin de celle-ci est atteinte. 
</TextBlock> 

Les differents controles doivent etre indiques dans l'ordre dans lequel vous 
desirez les voir apparaitre. lis sont affiches de gauche a droite et de haut en bas. 

<TextBlock Width="200" TextWrapping="WrapWithOverflow" 

Margin="5,5,5,5" TextAl ignment="Justify"> 

<Bol d>StackPanel </Bol d> 

L'utilisation d'un StackPanel offre encore des 

possibility plus restreinte que le WrapPanel. 

Toutefois, contrairement au WrapPanel, il offre 

une structure moins mobile et done beaucoup plus 

control able. Dans un StackPanel, chaque control e occupe 

une ligne. 
</TextBlock> 

<TextBlock Width="200" TextWrapping="WrapWithOverflow" 
Margin="5,5,5,5" TextAl ignment="Justify"> 
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<Bold>Grid</Bold>: Cette methode est general ement 
la methode la plus recommandee car elle off re un tres 
haut niveau d'adaptabilite du contenu de l'ecran a sa 
tai lie et done egal ement aux changements de 
resolution. Elle est toutefois plus complexe a mettre 
en ceuvre. 
</TextBlock> 
</WrapPanel> 
</Page> 



SOS 



* Auto Parse ► Refresh 

Wr.pP.nel jrKrw^.Wjn StockPa. 

Wrap»ene) neat psISutU Adaptec a ofTre en 

l eaflet precedent tm -ret avec ji reatrsnte 

VrepDene) 'es contrtes aont placet a ecntraren 

rate lea M dea ajtrea et ao*t ren*pyea atructare 

ejtcr^etlejemen* J la bene Ipacue la '« tea **eoup 



Grid. C-S- t^:-'-;- c^rie-rer; 
_• :_- ■ r _■ --::--■ _=- :i- - - 

o"re -r t-^= -li-.-s.. ^:j- F :;L ,t± 

to cortoiu ;» rfcran 1 h tallta et 3one 
fgilmr: ui ^angemeiti de 



Elle est tcutefsis Flu* c=r£plexe a met 

</Text51cck> 
</>frap?anel> 
<.''?age> 



Done. Markup saved to C: 'program Files\Micrcso ; t SDKs'.Wirsows'wl.C 1 
'\B i n '',X a m I Pad_Sa ved .xaml . 



< Figure 3-1 1 : 

Utilisation d'un 
WrapPanel 



Si vous redimensionnez la fenetre, le WrapPanel se charge de replacer les 
controles. 



Ulnlfxl 



* Auto Parse ► Refresh 



WrapPanel La n se en cage avec ji 
WrapPanel n'est pas du tout Adaptee a 
I'exemple precedent, En effet avec un 
'.Vrap-anel es centrales sen: places a 
cote les un des aenres et sont renvoyes 
ajtoma'.iqjement a la ligne lorsque la fin 
:e eel e-:i es: are nte. 

Stack Par el L' utilisation d'un StackPanel 
offre encore des Possibilites plus 
restreinte Que le WrapPanel. Toutefois, 
cortraire-nent au WrapPanel, il oflre une 
structure moins mobile et done 
beaucoup plus controlable. Cans un 
LtacvPare :he:L,e c:-foe -or'jje .re 
ligne. 

Grid: Cette methoce esr generalement 
la methode la plus recommandee car elle 
offre un tres haut niveau d'adaptabilite 



<.''Text^lc:ck> 



Done. Markup saved to Ci^'cgran Files', r-'icrc&rt SDKs'.Wiraows'wl.C' 
\B i n \X a m Pa d_5a ved . xarnl . 



< Figure 3-1 2 : Le 

meme exemple 
redimensionne 
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3.4 Utiliser un empilement 

L'utilisation d'un StackPanel offre encore des possibilites plus restreintes que 
le WrapPanel. Toutefois, contrairement au WrapPanel, il offre une structure 
moins mobile et done beaucoup plus facile a controler. Dans un StackPanel, 
chaque controle occupe une ligne. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<StackPanel> 

<TextBl ock TextWrappi ng="WrapWi thOverf 1 ow" 
Margin="5,5,5,5" TextAl ignment="Justify"> 
<Bol d>WrapPanel </Bol d> 

La mise en page avec un WrapPanel n'est pas du 
tout adaptee a l'exemple precedent. En effet avec 
un WrapPanel les control es sont places a cote les 
un des autres et sont renvoyes automat iquement a 
la ligne lorsque la fin de celle-ci est atteinte. 
</TextBlock> 



Les differents controles doivent etre indiques dans l'ordre dans lequel vous 
desirez les voir apparaitre. lis sont affiches de haut en bas. 



<TextBl ock TextWrappi ng="WrapWi thOverf 1 ow" 




Margin="5,5,5,5" TextAl ignment="Justify"> 




<Bol d>StackPanel </Bol d> 




L'utilisation d'un StackPanel offre encore des 




possibilites plus restreinte que le WrapPanel. 




Toutefois, contrairement au WrapPanel, il offre 




une structure moins mobile et done beaucoup plus 




control able. Dans un StackPanel, chaque controle 




occupe une ligne. 




</TextBlock> 




<TextBl ock TextWrappi ng="WrapWi thOverf 1 ow" 




Margin="5,5,5,5" TextAl ignment="Justify"> 




<Bold>Grid</Bold>: Cette methode est general 


ement 


la methode la plus recommandee car elle offre 


un tres 


haut niveau d' adaptability du contenu de I'ecran a sa 


tai lie et done egalement aux changements de 




resolution. Elle est toutefois plus complexe a 


mettre 


en oeuvre. 




</TextBlock> 




</StackPanel> 




</Page> 
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| * Auto Parse ► Refresh $ Courier New ■» _ _ 

WrapPanel _a nise en page avec un WrapPanel n'est pas du tout 
Adaptee a I'exemple precedent. En effet avec un WrapPanel les controJes 
sent places a cote les un des autres e: sont renvoyes automatiqueTent a 
la ligne lorsque la 'in Ce celle-ci est atteinte. 

StackPanel L'utilisation d'un StackPanel offre encore des Possibilites 
plus restreinte que le WrapPanel. Toutefois, contrairement au 
WrapPanel, il offre une structure moins mobile et done beaucoup plus 
cortrclable. Dans un StackPanel, chaque controle occupe une ligne. 

Grid: Cette rrethode est generalement la methode la plus recommandee 
car elle offre un tres haut niveau d'adaptabilite dj contenu de I'ecran a 
sa taille et done egalement aux changements de resolution. Elle est 
toutefois plus complexe a mettre en ceuvre. 



Cllc est -rratetcia p±u,3 r:xp_exe a met I 
</TextBlock> 
</Stac3cPanel> 
</Page> 



Done. Markup saved to C:\Program nies'iT-'icrcs;^ SCKs'',Windows\vl.O 
\Bin\Xam IPad_Sa ved .xaml . 



Figure 3-1 3 

Utilisation d'un 
StackPanel 



BIDS 



► Auto Parse ► Refresh 



WrapPanel La rnise en page avec un WrapPanel n'est pas 
du tout Adaptee a I'exemple precedent. En effet avec un 
WrapPanel ies controles sont places a cote les un des autres 
et sort renvoyes autcmatiquemert a la ligne lorsque la fin Ce 
celle-ci est atteinte. 

StackPanel L'utilisation d'un StackPanel offre encore des 
Possibilites plus restreinte que le WrapPanel. Toutefois, 
contrairement au WrapPanel, il offre une structure moins 
rrobile et dene beaucoup plus controlable. Dans un 
StackPanel, chaoue controle occupe une ligne. 

Grid: Cette methode est generalement la methode la plus 
recommandee car elle offre un tres haut niveau 
d'adaptabilite du contenu de I'ecran a sa taille et done 
egalement aux changements de resolution. Elle est toutefois 
plus complexe a mettre en ceuvre. 



Done. Markup sevec to O'.-rcgran Files'. Vicrcsc^ 5-Ks 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



< Figure 3-14 : Le 

meme code 



^arque 

^ Longueur de ligne 

Contrairement a I'exemple tel qu'il est dans le chapitre sur le WrapPanel, 
nous avions defini la largeur avec la propriete Width, comme avec StackPanel 
les elements sont automatiquement places I'un sous I'autre il n'est pas neces- 
saire de fixer la largeur. 
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3.5 Utiliser le docking 

Avec un DockPanel vous aurez la possibility de coller vos controles sur les 
differents bords. Comme rien ne vaut un exemple, regardons le code ci-dessous, 
qui est derive des exemples precedents. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<DockPanel> 

Le controle suivant sera colle sur le bord superieur. 

<Border BorderThickness="l" BorderBrush="Bl ack" 
DockPanel .Dock="Top" Margin="2,2,2,2" > 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 
Margin="5,5,5,5" TextAl ignment="Justify"> 
<Bo 1 d>d/r op Pan e Z </Bo 1 d> 
La mise en page avec un WrapPanel n'est pas 
du tout adaptee a 1 'exemple precedent. 
En effet, avec un WrapPanel les controles sont 
places a cote les uns des autres et sont renvoyes 
automatiquement a la ligne lorsque la fin 
de celle-ci est atteinte. 
</TextBlock> 
</Border> 

Ce controle-ci sera en revanche colle sur le bord droit. 

<Border BorderThickness="l" BorderBrush="Black" 
DockPanel .Dock="Right" Margin="2,2,2,2" Width="200"> 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 
Margin="5,5,5,5" TextAl ignment="Justify"> 
<Bol d>StackPane I </Bol d> 
L 1 utilisation d'un StackPanel off re encore des 
possibility plus restreintes que le WrapPanel. 
Toutefois, contrairement au WrapPanel, il off re 
une structure moins mobile et done beaucoup plus 
controlable. Dans un StackPanel, chaque controle 
occupe une ligne. 
</TextBlock> 
</Border> 

Ce dernier controle sera quant a lui colle sur le bord gauche. 

<Border BorderThickness="l" BorderBrush="Black" 
DockPanel .Dock="Left" Width="200" Margin="2,2,2,2" 
HorizontalAl ignment="Left"> 
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<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 
Margin="5,5,5,5" TextAl ignment="Jiistify"> 
<Bold>Srid</Bold>: Cette methode est general ement 
La methode la plus recommandee car el 1 e off re un 
tres haut niveau d 1 adaptability? du contenu de 
l'ecran a sa tai lie et done egal ement aux 
changements de resolution. El 1 e est toutefois plus 
complexe a mettre en ceuvre. 
</TextBlock> 
</Border> 
</DockPanel> 
</Page> 

Tout d'abord, des balises Border ont ete ajoutees afin de mieux visualiser le 
resultat. Elles n'ont aucun but particulier si ce n'est une meilleure comprehen- 
sion du resultat. Du fait de leur presence, la taille des differents blocs est fixee 
dans les balises Border et non plus dans les balises TextBlock. Les marges sont 
egalement presentes pour bien differencier les divers elements. 

Voyons maintenant le resultat. 



Auto Parse > Refresh 



a pea 5u taul adapEee k iters 
lacsa IrUhlUBte aut-ea et san 
ci ast attain.:-. 



Grid Catte neV.=0= eat 
:r^';a - er: La TSttoae Is plus 
TOrnmanttea car a a ptrra up tras 
1 :jl ■ a;j ; a.ic'aL Ht£ d- cp-lan. 



::::Llti: pja tt 
ftrapPBnd. Touted 



Margin-"5, 5, 5, 5" TextAligrimen-=" Justi ■ 
<Bcld>Wrappanel< /Bcld> 
La suae en page avec un KrapPanel r. 
du roue adapcee a -.'example precede 
En effet, avec un Wrappanel les ccn 



Done. Markup saved to C:\ 3 rogram FilesV'icrcsc^t SCfctWircowsV.'-.O 
\Bin\XamlPad_Saved,xaml. 



Figure 3-1 5 : 

Exemple d'utilisation 
d'un DockPanel 



Si nous ajoutons un cadre, celui-ci prendra automatiquement toute la place 
restant disponible. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<DockPanel> 

<Border BorderThickness="l" BorderBrush="Black" 
Margin="2,2,2,2" Horizontal Al ignment="Center"> 
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<TextBl ock TextWrappi ng="WrapWi thOverf 1 ow" 




Margin="5,5,5,5" TextAl ignment="Justify"> 




<Bold>Gn'd</Bold>: Cette methode est general ement 


La methode la plus recommandee car elle off re 


un 


tres haut niveau d 1 adaptability du contenu de 




I'ecran a sa tai lie et done egal ement aux 




changements de resolution. Elle est toutefois 


pi us 


complexe a mettre en ceuvre. 




</TextBlock> 




</Border> 




</DockPanel> 




</Page> 





• XamlPad 


BBS 


| [] Auto Parse ► Refresh '3> Courier New - - - 












</TextBlock> 
</Borler> 

<Bordez BoiderThickllt***"!" E:rserSru»h=" 
Margi:i="2 f 2, 2,2" KcriZ3ntaLAlignmea-="Ce 
<?eA&lC ck Text/Irappirigs-VirapWithCverf 

< > 


- 


Done. Markjp saved to C:\Program Files\ Microsoft SDKs\Windows\vl.O 
\Bin\XamlPad_Saved.xaml. 



< Figure 3-1 6 : 

Exemple d'utilisation 
d'un DockPanel 



L'ordre des controles a une importance capitale quant au resultat obtenu. Si 
nous ajoutons un cinquieme cadre et que nous fixions l'attribut DockPanel .Dock 
a Bottom, le cadre n'occupera pas l'entierete du bas d'ecran comme e'est le cas 
pour le cadre du haut. 

<Page 

xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x= " http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<DockPanel> 

<Border BorderThickness="l" BorderBrush="Black" 
DockPanel .Dock="Top" Margin="2,2,2,2" > 
<TextBl ock TextWrappi ng="WrapWi thOverf l ow" 

</TextBlock> 
</Border> 

<Border BorderThickness="l" BorderBrush="Black" 
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DockPanel .Dock="Right" Margin="2,2,2,2" Width="200"> 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 

</TextBlock> 
</Border> 

<Border BorderThickness="l" BorderBrush="Black" 
DockPanel .Dock=" Left" Width="200" Margin="2,2,2,2" 
HorizontalAl ignment="Left"> 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 

</TextBlock> 
</Border> 

<Border BorderThickness="l" BorderBrush="Black" 
DockPanel .Dock=" Bottom" Margin="2,2,2,2" > 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 
Margin="5,5,5,5" TextAl ignment="Justify"> 
<Bold>WropPoneZ</Bold> 
La mise en page avec un WrapPanel n'est pas 
du tout adaptee a l'exemple precedent. 
En effet avec un WrapPanel les control es sont 
places a cote les un des autres et sont renvoyes 
automatiquement a la ligne lorsque la fin 
de celle-ci est atteinte. 
</TextBlock> 
</Border> 

<Border BorderThickness="l" BorderBrush="Black" 
Margin="2,2,2,2" Horizontal Al ignment="Center"> 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 

</TextBlock> 
</Border> 
</DockPanel> 
</Page> 



' Auto Parse ► Refresh 



places a core les uzi des aurres ec 
autauti ijueaeiit a la ligne lorsque 
de celle-d eat atteinte. 

</TtateBIoek> 

</5=rder> 



Done. Marlcjp saved to C:\ 3 rogram Fies\MkJOSoft 5Dfc\WktdDW5\vl.O 
\Bin\XamlPad_5aved,xaml. 



Figure 3-1 7 : 

Exemple d'utilisation 
d'un DockPanel 
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En revanche, si dans le code nous deplacons ce dernier cadre avant les cadres 
de gauche et de droite, elle occupe alors toute la largeur. 

<Page 

xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<DockPanel> 

<Border BorderThickness="l" BorderBrush="Black" 
DockPanel .Dock="Top" Margin="2,2,2,2" > 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 

</TextBlock> 
</Border> 

<Border BorderThickness="l" BorderBrush="Black" 
DockPanel .Dock="Bottom" Margin="2,2,2,2" > 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 

</TextBlock> 
</Border> 

<Border BorderThickness="l" BorderBrush="Black" 
DockPanel .Dock="Right" Margin="2,2,2,2" Width="200"> 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 

</TextBlock> 
</Border> 

<Border BorderThickness="l" BorderBrush="Black" 
DockPanel .Dock=" Left" Width="200" Margin="2,2,2,2" 
Horizontal Al ignment="Left"> 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 

</TextBlock> 
</Border> 

<Border BorderThickness="l" BorderBrush="Black" 
Margin="2,2,2,2" Horizontal Al ignment="Center"> 
<TextBl ock TextWrappi ng= "WrapWi thOverf 1 ow" 

</TextBlock> 
</Border> 
</DockPanel> 

</Page> 
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* XamlPad M|n |(X | 



| ^ Auto Parse j ► Refresh Courier New 



- ---- - : ^ 



= y Li; » t 

autcmaticrueraem a la ligne lcracrue 
de celle-ci eat attemte. 
</Tex-ElocIc> 
</Bordex> 



Done. Markup saved to C:\Program Files\Microsoft SDKs\Windows\vl.O 
\Bin\XamlPad_Saved.xaml. 



Figure 3-18 : 

Exemple d'utilisation 
d'un DockPanel 



Suivant cette meme technique, vous pouvez ordonner les controles pour obtenir 
la segmentation qui vous convient. 



3.6 Autoriser le defilement 

Comme vous l'aurez probablement deja remarque, lorsque la fenetre ne peut 
plus contenir l'ensemble des elements, les barres de defilement n'apparaissent 
pas sur les bords. Le Scroll Viewer est la pour pallier ce probleme. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml "> 
<Scrol l Viewer 

Scrol l Vi ewer . Hori zontal Scrol l BarVi si bi l i ty= "Auto" 
Scrol l Vi ewer . Verti cal Scrol l BarVi si bi l i ty="Auto"> 
<StackPanel> 

<Border Mi nWi dth="200" MinHeight="200" 
BorderBrush=" Black" BorderThickness="l"> 
<TextBl ock TextWrappi ng="Wrap" 
Margin="0,0,0,20"> 
Cet exemple demontre I 'utilisation 
d'un Scroll View. 
</TextBlock> 
</Border> 
</StackPanel> 
</ScrollViewer> 
</Page> 
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Cet exemple demontre ('utilisation d'un ScrollView. 



| * Auto Parse [ ► Refresh Courier Nev, 



<Page 

xmln3="hrtp : I /achemaa.mcroecft . ocx/vmfx/aval 



Done. Markup saved to C:\Program Files\Microsoft SDKs\Windows\vl.O 
\Bin\XamlPad_5aved.xaml. 



< Figure 3-1 9 : 

Exemple d'utilisation 
d'un ScrollViewer 



Si nous reduisons la fenetre, les barres de defilement apparaissent. 



V XamlPad 



M|n||x| 



| * Auto Parse ► Refresh 9 ^ ^ 



let exemple demontre i'utilisation d'un Scroll' a 



* -n::r 



Done. Markup saved to C:\Program Files 
\Microsoft SDKs\Wlndows\vl.O\Bin 
\XamlPad_5aved.xaml. 



< Figure 3-20 : Barres de defilement 
en action 



La balise ScrollViewer gere a la fois la barre horizontale et verticale. Dans 
l'exemple, les attributs ScrollViewer. HorizontalScrollBarVisibility et 
ScrollViewer.VerticalScrollBarVisibility sont initialises a Auto. Cela cor- 
respond a l' usage le plus frequent pour les barres de defilement. En mode 
automatique, les barres ne sont visibles que lorsqu'elles deviennent obligatoi- 
res. 

Les autres valeurs possibles sont Disabled, qui a pour effet de ne pas avoir de 
barre de defilement dans la direction correspondante ; Hidden, qui n'affiche pas 
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la barre de defilement, mais le contenu se comporte comme si celle-ci etait 
presente, c'est-a-dire qu'il n'y aura pas de passage a la ligne automatique ; la 
derniere valeur possible est Vi si bl e, qui fonctionne comme Auto a la difference 
pres que la barre de defilement est visible meme si elle n'est pas utile. Dans ce 
dernier cas, elle sera grisee. 

<Scroll Viewer 

Scrol 1 Vi ewer. Hori zontal Scrol 1 BarVi si bi 1 i ty="Vi si bl e" 
Scrol 1 Vi ewer. Verti cal Scrol 1 BarVi si bi 1 i ty="Vi si bl e"> 





go 


* Au:o Parse ► Refresh <g> a j Courier New 






Cet exemple demontre ('utilisation d'un ScrollView. 










1V1 ewe r . fior i z ontalScrollBarVi3ibility» " Vi s it 
ivi Pwr.VFrtl njiVSmml IRatVI MM 11 r.v»*V1 MKIp 




■ 

v 


< 


> 




Done. Markup saved to C:\Program Rles\Microsoft 5DKs\Windows\vl.O 
\Bin\XamlPad_Saved.xaml. 



Figure 3-21 : 

Barres de defilement 
grisees 



^arque 

^ Valeur par defaut 

Si vous ne specifiez que la balise Scroll Viewer, la barre horizontale sera 
cachee et inactive [Hidden] alors que la barre verticale sera visible [Visible] 



;ra 

n 



L'utilisation d'un Scrol I Viewer ne se limite pas au bord de la fenetre. Vous 
pouvez parfaitement en integrer d'autres dans 1' interface. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<Scrol 1 Viewer 

Scrol 1 Vi ewer . Hori zontal Scrol 1 BarVi si bi 1 i ty=" Vi si bl e" 
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Scrol 1 Vi ewer . Verti cal Scrol 1 BarVi si bi 1 i ty="Hi dden"> 
<StackPanel> 

<Border Width="200" Hei ght="200" 
BorderBrush="Black" BorderThickness="l"> 
<Scroll Viewer 

Scrol 1 Vi ewer. Horizontal Scrol 1 BarVi si bi 1 i ty="Di sabl ed" 
Scrol 1 Vi ewer . Verti cal Scrol 1 BarVi si bi 1 i ty="Vi si bl e"> 
<TextBox TextWrapping="Wrap" 
AcceptsReturn="True"> 
Cet exemple demontre 1 'utilisation d 1 un 
Scroll View. 
</TextBox> 
</Scrol 1 Viewer> 
</Border> 
</StackPanel> 
</Scrol 1 Viewer> 
</Page> 



XamlPad 



Auto Parse ► Refresh 



III©® 



Cet exemple demontre I'utilisation 
d un ScrollVlew. 



< 



Done. Markup saved to C:\Program Fi!es\Microsoft SDKs\Windows\vl.O 
\Bin\XamlPad_Saved.xaml. 



Figure 3-22 : 

ScrollViewer sur un 
controle 



Tapez du texte dans la boite de texte et vous verrez apparaitre la barre de 
defilement. 
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3.7 Melanger les techniques 
de mise en page 

Toutes les methodes que nous venons de voir permettent chacune de resoudre 
certaines situations mais, bien souvent, vous vous trouvez en face d'un 
probleme ou vous devriez, pour partie, utiliser telle methode et pour partie telle 
autre methode. En XAML, vous pouvez utiliser autant de methodes de mise en 
page que vous voulez, et cela dans le meme ecran. Bien sfir, pour y arriver, il 
faut respecter quelques regies. 

Le principe est simple. II s'agit ni plus ni moins que le principe de la poupee 
russe. Si une page ne peut contenir qu'un seul objet, disons un Grid, celui-ci 
peut contenir des controles mais egalement un autre conteneur comme un 
Canvas. Le Canvas peut a son tour contenir un Grid ou un DockPanel, par 
exemple. 

II n'y a quasiment plus de limite pour realiser la mise en page de vos reves. 
Mais, attention, plus complexe sera votre ecran, plus complexe sera votre 
structure et plus la realisation sera ardue et longue ! 

De fait, il existe non pas une methode pour realiser la mise en page mais une 
infinite de methodes avec chacune leurs avantages et leurs inconvenients. 

L exemple qui suit est a titre purement educatif et aurait vraisemblablement pu 
etre resolu differemment. Toutefois, son objectif est purement didactique et, de 
ce point de vue, il remplit pleinement son role. 

Nous allons au travers de cet exemple non seulement voir comment integrer 
differents conteneurs mais egalement en profiter pour a nouveau voir certaines 
fonctionnalites des controles courants. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 

Nous commencons par definir une barre de defilement horizontale et une 
verticale. 

<Scroll Viewer 

Scrol 1 Vi ewer . Hori zontal Scrol 1 BarVi si bi 1 i ty="Vi si bl e" 
Scrol 1 Vi ewer . Verti cal Scrol 1 BarVi si bi 1 i ty="Vi si bl e"> 

Le premier conteneur defini est un DockPanel . II va nous permettre de decouper 
la fenetre en quatre zones. Une pour l'en-tete, une pour le bas de page et deux 
pour le corps de la fenetre. 

<DockPanel> 
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Tout d'abord l'en-tete, qui contient un Canvas. 

<Border BorderThickness="2" DockPanel .Dock="Top" 
BorderBrush= " Li ghtGreen "> 
<Canvas Background="DarkSeaGreen" 
MinHeight="40" > 
<Label FontSize="24" FontFami ly="Engravers MT" 
Content="Ma bib! iotheque" /> 
</Canvas> 
</Border> 

Ensuite le bas d'ecran, qui de facon qu'il occupe toute la largeur de la fenetre 
doit etre defini a ce moment. II contient egalement un Canvas dans lequel le 
controle est positionne depuis le coin inferieur droit. 

<Canvas DockPanel .Dock="Bottom" 
Background="Green" MinHeight="30"> 
<Label Name="lbl Copyright" 
Content="Le concepteur 2006" 
Canvas . Bottom="3" Canvas . Ri ght=" 10" 
VerticalAl ignment=" Bottom" 
Hon' zontal Al i gnment=" Ri ght "/> 
</Canvas> 

La partie droite du corps contient un WrapPanel . Cette partie sera fixe lors d'un 
redimensionnement horizontal. 

<Border DockPanel .Dock="Right" 
Mi nWi dth="200" MaxWi dth="400" 
BorderThickness="l" BorderBrush= "Black" 
Background^' Li ghtGreen "> 
<WrapPanel> 

<Image Width="190" Margin="2,2,2,2"> 
<Image.Source> 

C:\Documents and Setti ngs\Al 1 Users\ 
Documents\Mes images\ 
Echanti lions d 1 images\Hiver.jpg 
</Image . Source> 
</Image> 

<TextBox TextWrapping="Wrap" Width="195" 
Margin="2,2,2,2" AcceptsReturn="True" /> 
<TextBox TextWrapping="Wrap" Margin="2,2,2,2" 
AcceptsReturn="True" /> 
</WrapPanel> 
</Border> 

Le dernier volet est colle sur le bord gauche et contient une grille. La grille sert 
alors a positionner les differentes zones de saisie. 
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<Border DockPanel .Dock="Left" Mi nWi dth="280" 
Mi nHei ght="200" BorderThi ckness= "1" 
BorderBrush=" Black" Background^' Li ghtGreen"> 
<Gri d> 



La grille contient 2 colonnes et 6 lignes. La largeur de premiere colonne est fixe 
et plus etroite que la seconde, tandis que la hauteur de la troisieme ligne est 
fixee a un minimum de 40 points pour que la ComboBox reste suffisamment 
visible. 



<Gri d . Col umnDef i ni ti ons> 

<ColumnDefinition Width="80" /> 

<ColumnDefinition Mi nWi dth="200"/> 
</Gri d . Col umnDef i ni ti ons> 
<Gri d . RowDef i ni ti ons> 

<RowDefinition /> 

<RowDefinition /> 

<RowDefinition MinHeight="40"/> 

<RowDefinition /> 

<RowDefinition /> 

<RowDefinition /> 
</Grid. RowDef i nit ions> 
<Label Name="lbl Livre" Grid.Row="0" 
Grid.Column="0"> 

Livre 
</Label> 

<TextBox Name="txtLivre" Grid.Row="0" 
Gri d . Col umn= " 1 " MaxLength= "30" 
Height="23" Text="TL" 

Vert i cal Al i gnment= "Top" Margi n= "2 , 2 , 2 , 2 "/> 
<Label Name="lblAuteur" Grid.Row="l" 

Grid.Column="0"> 

Auteur 
</Label> 

<TextBox Name="txtAuteur" Grid.Row="l" 
Gri d . Col umn= " 1 " MaxLength= "30" 
CharacterCasi ng="Upper" Hei ght="23" 
Vert i cal Al i gnment= "Top" Margi n= "2 , 2 , 2 , 2 "/> 

<Label Name="lblColl" Grid.Row="2" 
Grid.Column="0"> 
Collection 

</Label> 

<ComboBox Name="txtColl" Grid.Row="2" 
Grid. Col umn="l" IsEditable="True" 
Vert i cal Al i gnment= "Top" Margi n= "2 , 2 , 2 , 2 "> 
<ComboBoxItem> 

Fiction 
</ComboBoxItem> 
<ComboBoxItem> 
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Horreur 
</ComboBoxItem> 

<ComboBoxItem IsSelected="True"> 

Policier 
</ComboBoxItem> 
<ComboBoxItem> 

Historique 
</ComboBoxItem> 
<ComboBoxItem> 

Amour 
</ComboBoxItem> 
</ComboBox> 

<Label Name="lblISBN" Grid.Row="3" 
Grid. Col umn="0"> 

Numero ISBN 
</Label> 

<TextBox Name="txtISBN" Grid.Row="3" 
Grid.Column="l" MaxLength="15" Height="23" 
Verti cal Al i gnment= "Top" Margi n="2 ,2 ,2 , 2"/> 

<Label Name="lbl Genre" Grid.Row="4" 
Grid. Col umn="0"> 
Genre 

</Label> 

<TextBox Name="txtGenre" Grid.Row="4" 
Gri d . Col umn= " 1 " MaxLength= " 50" 
Height="23" VerticalAl ignment="Top" 
Margin="2,2,2,2"/> 
<Grid Grid.Row="5" Grid.Column="0" 
Grid. Col umnSpan="2"> 
<Gri d . Col umnDef i ni ti ons> 
<ColumnDefinition /> 
<ColumnDefinition /> 
</Gri d . Col umnDef i ni ti ons> 
<Button Grid.Row="0" Grid. Col umn="0" 
Content=" Precedent" 
Width="80" Height="30" /> 
<Button Grid.Row="0" Grid.Column="l" 
Content="Suivant" 
Width="80" Height="30" /> 
</Grid> 
</Grid> 
</Border> 
</DockPanel> 
</Scrol 1 Vi ewer> 
</Page> 
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Hide Editor 100% 



Ma bibliotheque 




Livre jl 
Auteur 

Collection ! Policier 

Numero ISBN 
Genre 




L'histoire est bien menee et le 
rythme rapirie Fart de ce roman un 
policier de ...J 



Comme d'habitude, I'auteur va nous mener dans des contrees loin-aines et 
nous faire decouvrir des ... 



Done. Markup saved to "C:\Program Files'.Microsoft SDKs\VVindoivs\vl.O\BirA.XamlPac_Saved.xarrl". 



A Figure 3-23 : Mise en page mixte 



^arque 

Erreur dans le code 

Le contenu de la balise image est volontairement scinde en 3 lignes pour une 
question de lisibilite de I'exemple. Toutefois, si vous desirez le reproduire, il sera 
necessaire de regrouper le nom du fichier sur une meme ligne. 



ne 

ira 



Analysons cet exemple. 

La mise en page se fait au moyen d'un DockPanel inclus dans un Scrol 1 Vi ewer. 
Ce DockPanel est compose de 4 zones. 

La premiere zone est le titre "Ma bibliotheque". II s'inscrit naturellement en 
haut d'ecran. Nous utilisons done l'attribut Top pour le docking. Un cadre vert 
clair entoure la zone de titre. Ce cadre est realise avec la balise Border. 



<Border BorderThickness="2" DockPanel .Dock="Top" 
BorderBrush="LightGreen"> 
<Canvas Background="DarkSeaGreen" MinHeight="40" > 
<Label FontSize="24" FontFami ly="Engravers MT" 
Content="Ma bibliotheque" /> 
</Canvas> 
</Border> 



Comme vous le voyez, e'est le nceud Border qui est le parent de ce groupe. 
C'est done lui qui doit etre positionne par rapport a notre DockPanel . Les autres 
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elements suivent inevitablement le mouvement. Le controle Border inclut un 
Canvas, ce qui va nous permettre de positionner notre titre sur la base de 
coordonnees. Grace a l'utilisation du Canvas, nous pourrions avoir d'autres 
controles dans la barre de titre 

Pour obtenir la couleur du fond de notre barre de titre, il nous a suffi d'utiliser 
l'attribut Background du Canvas. Pour eviter un ecrasement exagere, la hauteur 
minimale du Canvas est fixee a 40. 

Pour obtenir le bas d'ecran, nous faisons de meme mais cette fois sans utiliser 
de bord. C'est done directement le Canvas qui recoit l'attribut 
DockPanel .Dock="Bottom". 

<Canvas DockPanel .Dock="Bottom" Background="Green" 
MinHeight="30"> 
<Label Name="lblCopyright" 
Content="Le concepteur 2006" 
Canvas . Bottom="3" Canvas . Ri ght=" 10" 
Vertical Al ignment=" Bottom" 
Hori zontal Al i gnment= " Ri ght "/> 
</Canvas> 

Afin qu'ils prennent toute la largeur de la fenetre, nous commencons par definir 
l'en-tete et le bas de page. Les autres zones de notre DockPanel sont definies 
apres. 

La troisieme zone definie est la zone de droite. 

<Border DockPanel .Dock="Right" MinWidth="200" MaxWidth="400" 
BorderThickness="l" BorderBrush="Black" 
Background^ 1 Li ghtGreen "> 
<WrapPanel> 

<Image Width="190" Margin="2,2,2,2"> 
<Image.Source> 

C:\Documents and Setti ngs\Al 1 Users\ 
Documents\Mes images\ 
Echanti lions d 1 images\Hiver.jpg 
</Image.Source> 
</Image> 

<TextBox TextWrapping="Wrap" Wi dth=" 195" 
Margin="2,2,2,2" AcceptsReturn="True" /> 
<TextBox TextWrapping="Wrap" Margin="2,2,2,2" 
AcceptsReturn="True" /> 
</WrapPanel> 
</Border> 

Dans cette zone, les controles sont positionnes au moyen d'un WrapPanel. 
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II est egalement inclus dans un Border, simplement afin d'obtenir un fin cadre 
noir autour. 

La derniere zone, celle de gauche, est realisee grace a un Grid dans lequel les 
differents controles sont positionnes dans les cellules formees par la grille. Le 
Grid est lui-meme inclus dans un Border pour definir un fin cadre noir. Le fond 
est egalement defini dans la balise Border, mais nous aurions tout aussi bien pu 
le definir dans la balise Grid. 

<Border DockPanel . Doc k=" Left" Mi nWi dth="280" MinHeight="200" 
BorderThickness="l" BorderBrush="Black" 
Background= " Li ghtGreen"> 
<Grid> 

<Gri d . Col umnDef i ni ti ons> 

<ColumnDefinition Width="80" /> 
<Col umnDef i ni t i on Mi nWi dth="200"/> 
</Gri d . Col umnDef i ni ti ons> 
<Gri d . RowDef i ni ti ons> 
<RowDefinition /> 
<RowDefinition /> 
<RowDefinition MinHeight="40"/> 
<RowDefinition /> 
<RowDefinition /> 
<RowDefinition /> 
</Gri d . RowDef i ni ti ons> 

</Grid> 
</Border> 

Si nous examinons le contenu de plus pres, nous remarquons la presence d'un 
Grid a l'interieur de notre Grid. 

<Grid Grid.Row="5" Grid.Column="0" 
Gri d . Col umnSpan="2"> 
<Grid. Col umnDef initions> 
<ColumnDefinition /> 
<ColumnDefinition /> 
</Gri d . Col umnDef i ni ti ons> 
<Button Grid.Row="0" Grid. Col umn="0" 
Content="Precedent" 
Width="80" Height="30" /> 
<Button Grid.Row="0" Grid. Col umn="l 
Content="Suivant" 
Width="80" Height="30" /> 
</Grid> 

Pourquoi ce Grid ? Tout simplement parce que les boutons doivent etre centres 
dans la grille et que les colonnes definies dans notre premier Grid sont de 
largeur differente. Ce nouveau Grid inclut, grace a l'attribut Grid. Col umnSpan, 
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les deux colonnes. Dans ce nouveau Grid, qui occupe en definitive toute la 
ligne, deux colonnes, cette fois de largeur identique, sont redefinies. 



^arque 

^ Effet du redimensionnement 

La regie du DockPanel, qui determine que le dernier element occupe I'espace 
restant, aura pour consequence lorsque vous redimensionnez la fenetre que 
seule la zone de gauche va s'adapter dans les deux sens. La taille des autres 
parties reste fixe dans une direction. 



Cet exemple demontre a quel point il est possible d'integrer les differents 
composants les uns dans les autres mais egalement que chaque choix, et ce y 
compris l'ordre de chaque balise, va avoir un impact sur le resultat final. 

Comme les zones sont definies volontairement dans un ordre bien determine, 
les controles qui y sont inclus vont egalement etre ordonnes en fonction. Cet 
etat de fait peut eventuellement etre prejudiciable a la qualite de votre interface 
graphique. En effet, l'ordre d' apparition des controles va egalement regir le 
deplacement du curseur avec la touche [Tab] . La solution a ce probleme est 
simple et deja connue de ceux qui ont 1' habitude du developpement tradition- 
nel. XAML met a notre disposition l'attribut Tablndex, qui va simplement 
redefinir l'ordre de parcours avec la touche [Tab). 



3.8 Creer une page composite 

Une page ou une fenetre peut etre composee de differentes pages. Pour cela, 
vous disposez de la balise Frame, qui va vous permettre d'integrer dans votre 
fenetre ou votre page le contenu d'autres pages. 

Prenons un exemple simple. 

<Window x:Class="Windowl" 
xmlns= 

"http://schemas .mi crosoft.com/wi nfx/2006/xaml /presentati on" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Title="Frame" 

> 

<StackPanel> 
<Label> 

Une page avec 2 frames. 
</Label> 
<WrapPanel> 

<Frame Source="Pagel.xaml " BorderBrush="Black" 
BorderThickness="l" Width="200" Height="100"/> 
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<Frame Source="Page2.xaml " BorderBrush="Black" 
BorderThickness="l" Width="200" Height="100"/> 
</WrapPanel> 
</StackPanel> 
</Wi ndow> 

Pagel.xaml contient : 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 

> 

<StackPanel> 
<Label> 

Frame 1 
</Label> 
</StackPanel> 
</Page> 

Page2.xaml contient : 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 

> 

<StackPanel> 
<Label> 

Frame 2 
</Label> 
</StackPanel> 
</Page> 



Frame 



Ire naae ave: ~ tjts-:, 



Figure 3-24 : 

Utilisation de frames 
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^ention ^^^^^^^^^^^^^ ^^^^^^^^^^^ 

^" Contenu d'un frame 

Si vous pouvez utiliser des frames aussi bien au sein d'une balise Window qu 
d'une balise Page, la page referencee par la balise Frame ne pourra en aucu 
cas etre une page utilisant la balise Window. 



ue 
un 



3.9 Checklist 

Dans ce chapitre, nous avons essentiellement vu comment disposer les elements 
a I'ecran et principalement : 

■ le positionnement par utilisation des coordonnees en utilisant Canvas ; 

■ le positionnement en utilisant une grille avec la classe Grid ; 

■ le positionnement en utilisant les panneaux de type StackPanel , WrapPanel 
et DockPanel ; 

■ le melange de ces differentes methodes ; 

■ autoriser le defilement avec Scroll Viewer ; 

■ realiser des pages composees de plusieurs pages avec Frame ; 

■ comprendre et utiliser les attributs attaches. 
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Creer une liste deroulante 92 

Creer une ComboBox 98 

Creer une case a cocher 100 

Utiliser les boutons radio 102 

Placer des info-bulles 106 

Utiliser les panneaux a onglets 109 

Creer un bouton automatique 112 

Utiliser un Slider 114 

Utiliser un Expander 118 

Utiliser une ViewBox 121 

Utiliser un Popup 123 

Ajouter de la video dans la fenetre 126 

Checklist 129 
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4.1 Creer une liste deroulante 

Pour faire un choix parmi une liste, vous pouvez utiliser ce controle. Toutefois, 
la liste ne doit pas etre trop longue sinon le choix devient vite fastidieux. 

Pour realiser une liste de choix, vous devez utiliser une balise ListBox. A 
l'interieur du noeud ainsi defini, vous devrez pour chaque element de la liste 
ajouter un noeud enfant utilisant la balise Li stBoxItem. 

<ListBox Name="l stLangue" MaxWidth="80"> 

<Li stBoxItem>Frangai s</Li stBoxItem> 

<Li stBoxItem>Angl ai s</Li stBoxItem> 

<Li stBoxItem>Al I emand</Li stBoxItera> 

<Li stBoxItem>Ital i en</Li stBoxItem> 

<Li stBoxItem>Espagnol</Li stBoxItem> 
</ListBox> 



• XamlPad 






| * Auto Parse ► Refresh 


|^^m^ Coorier New - - . 




Fran^ais 
Anglais 
Allemand 
I taller 
Espagrol 




xmln3="http: / / schemes. micros eft . ccnv/virifx/avalc 
xmlri3:x="htt£: / /schema" .T.icrc3cfc . cm -'vi-fx ■•'xar 
<ScacJcPanel> 

<Li*tB«l Kaae«"l«tLangoe" MaxWidxfr 
<Li3t3cxItera>Franfai3<. , 'Li3':E:xI - 
<ListBcxIieni>Ar.aIai»<.' , Li3-EcxI-t 
<*Ti1 ■rfimTrf ifll ItMirwlr/TiltrTlniT 

<Lis^Scx:tem>:talien< 'Lisc-cxlc- 
< > 


v 


Done. Markup saved to C:\Program Files\Microsoft 5DKs\Windows\vl.O 
\Bi n\Xam 1 Pad_Saved .xaml . 



•4 Figure 4-1 : Une 

simple liste de choix 



Outre les attributs que nous avons deja evoques comme MaxWidth, repris dans 
l'exemple, deux attributs sont particulierement interessants pour ce controle. 

II s'agit tout d'abord de Sel ectedlndex, qui permet de definir une valeur par 
defaut. 



<ListBox Name="l stLangue" 

Selectedlndex="3" MaxWidth="80"> 
<Li stBoxItem>Frangai s</Li stBoxItem> 
<Li stBoxItem>Angl ai s</Li stBoxItem> 
<Li stBoxItem>Al I emand</Li stBoxItem> 
<Li stBoxItem>Ital i en</Li stBoxItem> 
<Li stBoxItem>Espagnol</Li stBoxItem> 

</ListBox> 
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jH 



Frangais 

Anglais 

Alemand 

Italien 

Espagnol 



xmln3="r.ttp : ■' / 3 cheniaa .microsoft . ssai/virifx -''avalc 1 
xmln3:x="ht-p: f/nrtirwin ■Irrninfr rnM/MlnfT/mi 
<StacJcPanel> 

<ListBoi Hw'l irtTinngw* 
Seleetedlndex*"3" MaxKidth="20"> I 
<Li3-B2x:-:em>Anglai2</Li3-Ecx:-' 
■tTlnTTriWi ftl 1 ■■■i¥l r/Til ■TflnnrT 
<Li3tBcxItem>I-;alier.< .'ListBzxIt- 



Done. Markup saved to C:\Program FflBB^kxosc^t 5CKs\Wircows\vi.O 
\Bi n \Xarn lPad_5a ved .xaml . 



< Figure 4-2 : La 

preselection dans une 
liste de choix 



Comme vous pouvez le constater en comparant le resultat avec l'ecran 
ci-dessous, la preselection ne s'affiche pas de la meme maniere qu'un element 
selectionne par l'utilisateur. 



Ulnllxj 




xmln3="http : ' s-r.emaa . ni or 03 -f z . ::i'v:n!i a"al: 
xmlns : x="htrp : . ' schema; .micrcscft . ccm/winf x<'xan 
<StackPanel> 

<LisrBox Hame="l3iLangue" 
£ale-:tadlndax="3" MaxKidth="SO"> I 
<Lia-B2XI-em>Ar.glai2< /Lia^Ecx;-' 
<Li3-B2XIrem>Allexar.d</ListEcxI' 
<Ii3tBcxItein>Italier.<. LiarEcxIf 



Done. Markup saved to C:\Program Files\Microsoft SDKs\Wiixiows\vl.O 
\Bin\xamlPad_Sa ved .xaml. 



A Figure 4-3 : Un 

element selectionne 
dans une liste de 
choix 



^ention ^^^^^^ 

*"T Particularity de la numerotation 

Les differentes lignes de la liste de choix sont numerotees non pas de 1 a 
mais bien de □ a n-1 ; n etant le nombre d'elements de la liste. Pour 
selectionner le premier, vous devez done mettre comme valeur □. Dans 
I'exemple, la valeur selectionnee est bien la quatrieme, Selected Index vaut I 
^— — — — — — 
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II existe une autre facon pour indiquer quel element doit etre preselectionne. 
Cette methode a l'avantage d'etre beaucoup plus visuelle car il s'agit de 
modifier dans la balise de l'element voulu l'attribut IsSelected. Le resultat 
obtenu est le meme qu'avec l'attribut Sel ectedlndex. 

<ListBox Name="l stLangue" 
MaxWidth="80"> 

<Li stBoxItem>Francai s</Li stBoxItem> 
<Li stBoxItem>Angl ai s</Li stBoxItem> 
<Li stBoxItem>Al 1 emand</Li stBoxItera> 
<Li stBoxItem IsSel ected="true">Ital i en</Li stBoxItem> 
<Li stBoxItem>Espagnol</Li stBoxItem> 
</ListBox> 

Le second attribut interessant est l'attribut Sel ectionMode, qui permet d'auto- 
riser ou d'interdire la selection de plusieurs valeurs. Si vous optez pour 
plusieurs valeurs, il existe deux modes possibles, en assignant soit la valeur 
Multiple, ce qui permet de selectionner ou de deselectionner plusieurs valeurs 
en cliquant simplement avec la souris, soit la valeur Extend, ce qui permet 
d'utiliser les touches [ Ctrl 1 et [ Maj 1 pour realiser votre selection. La touche [ Ctrl 1 
permet d'ajouter a votre selection l'element sur lequel vous cliquez sans 
deselectionner les elements deja choisis. La touche [ Maj | permet quant a elle de 
selectionner tous les elements repris entre le dernier element selectionne et 
l'element sur lequel vous cliquez. 

<ListBox Name="l stLangue" 

Sel ecti onMode="Mul ti pi e" MaxWi dth="80"> 

<Li stBoxItem>Frangai s</Li stBoxItem> 

<ListBoxItem>Anglais</ListBoxItem> 

<Li stBoxItem>Al 1 emand</Li stBoxItera> 

<Li stBoxItem>Ital i en</Li stBoxItem> 

<Li stBoxItem>Espagnol</Li stBoxItem> 
</ListBox> 



• XamlPad BEllE 



| * Auto Parse | ► Refresh 






illenand 
Espagnol | 




xmlns:x="ticcp://s:hema;.xi:t::3ci;. com/wmfx/xai 
<Sta.;]£Pan5l> 

<ListBox Name""l3tLang - je" 
SeltccionMcde-'Kul'iple" Max'nid-h- 
<Iis^:B:xI^-m>FranfaL5<.'ListBcxI- 
<Lis^Bnx:--m>«r.ala^3</LL3tE:x:-- 

<Ii3^5cxI^em>I-alien<.'L.3-EcxI-t 




< 






Done. Markjp saved to C:\Program Files\Micrasoft SDKs\Windows\vl.O 
\Btn\XamlPad_5aved.xaml. 



Figure 4-4 : Une 

liste de choix a 
selection multiple 
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Si vous desirez realiser une preselection de plusieurs valeurs, il suffit de 
modifier l'attribut Is Selected de chaque element a preselectionner. 

<ListBox Name="l stLangue" 

MaxWi dth="80" Sel ecti onMode= "Mul ti pi e"> 

<Li stBoxItem>Francai s</Li stBoxItem> 

<Li stBoxItem IsSel ected="true">Angl ai s</Li stBoxItem> 

<Li stBoxItem>Al 1 emand</Li stBoxItem> 

<Li stBoxItem IsSel ected="true">Ital i en</Li stBoxItem> 

<Li stBoxItem>Espagnol</Li stBoxItem> 
</ListBox> 



^arque 

fc" Preselectionner un element avec Sel ectedVal ue 

Au lieu d'utiliser Selectedlndex, vous pourriez utiliser l'attribut Sel ectedVal ue. 
Toutefois, dans le code XAML, cela me semble peu opportun et plus complique. 
II n'en va pas necessairement de meme si vous initialisez la valeur depuis le code 
.NET. 



Si vous desirez rendre une liste inaccessible a l'utilisateur, vous devrez utiliser 
l'attribut IsEnabled. Ce controle ne supporte pas l'attribut IsReadOnly. 

<ListBox Name="l stLangue" 
IsEnabled="False" 
MaxWidth="80"> 

<Li stBoxItem>Francai s</Li stBoxItem> 
<Li stBoxItem>Angl ai s</Li stBoxItem> 
<Li stBoxItem>Al 1 emand</Li stBoxItem> 
<Li stBoxItem IsSel ected="true">Ital i en</Li stBoxItem> 
<Li stBoxItem>Espagnol</Li stBoxItem> 
</ListBox> 



|f ' Auto Parse f ► Refresh $ Ccjrier New 



Anglais 
AAemand 
I taken 
Espagnoi 



(Zldlfxi 



<Sca=JcPanel> 

<Li3'cBox Hame="lflcLangue" 
IsEnatle^-ralse" 
Haxnldth="2:"> 

fTif itHnwTrw<Trwn7i1 rf/M rtlbf T" 
fTiinrnniTr<iw»>nQlii iw"<7iliTHniTri 
■fIlftBwtlw>imn— iMlffTHTHrnT* 
<li3-5csl-=m I;Seie"e£l="~rue">: 



Done. Markjp saved to C: program rBu^fliiuuiuft 5_K5V>Vindows\vl.u 
\Bi n\X3m lPad_Saved .xa rn I . 



M Figure 4-5 : Liste 
de choix desactivee 
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^uce 

X Probleme de lisibilite 

Cette facon de proceder ne convient pas bien car, comme vous pouvez le 
constater, bien qu'une valeur soit preselectionnee, elle n'est pas visible. Pour 
resoudre ce probleme, assignez la valeur Blue a I'attribut Background de la 
balise ListBoxItem correspondante. 



<ListBox Name="l stLangue" 
MaxWidth="80"> 

<Li stBoxItem>Francai s</Li stBoxItem> 

<Li stBoxItem>Angl ai s</Li stBoxItem> 

<Li stBoxItem>Al 1 emand</Li stBoxItem> 

<ListBoxItem Background="Bl ue" IsSelected="true"> 

Ital ien 
</ListBoxItem> 

<Li stBoxItem>Espagnol</Li stBoxItem> 
</ListBox> 



• XamlPad 


E® 




| * Auto Parse ► Refresh 


|i£J|^ Courier New Zs f 


























<S tack-Far. el; 

<L1 


: >: :"r,;-,e = " li tI.-,;-.; " 
:led="Fal5e" 




<Li3t5cxItem>r rancais< fJAst&OxX' 
<Li*tBQ*Iteni>Aiiglai3< ■■'LlszBzxZz* 
<Li3t5cxItem>Allexar.d<' , Li3rEcxI' 
<Li3t5:xItem 3ac)c:f::ound=*'B|l.ue" : 


v 


< 


> 




Done. Markup saved to C:\Program Rles\Microsoft 5DKs\Windows\vl.O 
\Bin\Xam lPad_Sa ved .xaml. 



M Figure 4-6 : Liste 
de choix desactivee 
modifiee 



^ention ^^^^^^^^^^^^^^^^^^^ 

^" Limite de cette modification 

Cette solution n'est envisageable que si le controle reste toujours a I'etat inactif. 
Dans le cas contraire, I'element modifie avec Background apparaltra toujours 
comme selectionne. 



:if I 

irs 
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Si vous souhaitez que le controle soit actif mais que certaines valeurs soient 
desactivees, il suffit de placer l'attribut IsEnabl ed dans l'etat Fal se pour chacun 
des elements. 

<ListBox Name="l stLangue" 
MaxWidth="80"> 

<Li stBoxItem>Frangai s</Li stBoxItem> 
<Li stBoxItem>Angl ai s</Li stBoxItem> 
<Li stBoxItem>Al 1 emand</Li stBoxItem> 
<ListBoxItem IsEnabl ed=" Fal se">Ital ien</Li stBoxItem> 
<ListBoxItem IsEnabl ed=" Fal se">Espagnol</ListBoxItem> 
</ListBox> 



00® 



P Auto Parse | ► Refresh 



Fran^ais 
Anglais 
Allemand 

Italien 
Espagnol 



Max>7ia-h="^:"> 

<Lj.3t5:x:t5ir.>E'rar,9ai»< /L-zzEcxl- 
<Li3tBoxIten>Anglai3</Li3tBoxIti 
<List5:xI*:en-.>All.eT.ar.d< ■ ListEcxI" 
<Li3t5:xIrem I3lnai:led=":3l3e*'>: 
<Li3-SoxI-em IsEnabied«"Faiae">] 



</Ll3t3cx> 

</StacfcPanel> 



Done. Markup saved to C:\Program Rles\Microsoft 5DKs\Windows\vl.O 
\Bin\XamlPad_Saved.xaml. 



Figure 4-7 : Une 

liste de choix dont 
certains elements 
sont desactives 



Si la hauteur de la liste n'est pas suffisante, une barre de defilement sera 
automatiquement ajoutee. 



<ListBox Name="l stLangue" 

MaxWidth="80" MaxHeight="45"> 

<Li stBoxItem>Frangai s</Li stBoxItem> 

<Li stBoxItem>Angl ai s</Li stBoxItem> 

<ListBoxItem>Al lemand</ListBoxItem> 

<ListBoxItem IsEnabl ed=" Fal se">Ital ien</ListBoxItem> 

<ListBoxItem IsEnabled="Fal se">Espagnol</ListBoxItem> 
</ListBox> 
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Auto Parse ► Refresh 



AtonarxJ v 



vijJ.3l.DOX iioaie— j.3 Lj-iiii jus A 

' :-:a:-::-:=i;' :-.- = " -:.= "> 

<Ll3rS;>::-^m>: r=ri;=i;< Li^BcxItent 
<UstBoxIe«s; .-_ -.: lRis LlSEBoxItera> 
cLi3tBaxItem>aileaaiid< LiatBoxItem v 

Mil . J^^M^^^^Bj gj 



Done. Marfcjp saved to C:\=ragrarn Fil«\Kicrescft SDKs 
\Windows\vl .0\Bin\XamlPad_Saved.xaml. 



M Figure 4-8 : Une 

liste avec sa barre de 
defilement 



4.2 Creer une ComboBox 

Tres proche de la liste de choix (ListBox), la ComboBox a toutefois genera- 
lement ma preference. Elle occupe moins de place a l'ecran et permet de 
rechercher un element en tapant le debut de la valeur. Elle offre egalement la 
possibilite d'introduire une valeur differente de celles proposees dans la liste 
mais uniquement si vous desirez offrir cette possibilite. 

Pour creer une ComboBox, vous devrez utiliser la balise du meme nom. A 
l'interieur du nceud ainsi cree, vous devrez pour chaque element creer un nceud 
enfant en utilisant la balise ComboBox Item. 



<ComboBox Name="cboPays" MaxWidth="80" 
Selectedlndex="4"> 
<ComboBoxItem>France</ComboBoxItem> 
<ComboBoxI tem>Bel gi que</ComboBox I tem> 
<ComboBoxItem>Al 1 emagne</ComboBoxItem> 
<ComboBox I tem>Su i s s e</ComboBox 1 1 em> 
<ComboBoxItem>Ital ie</ComboBoxItem> 
<ComboBoxItem>Espagne</ComboBoxItem> 

</ComboBox> 



V XamlPad 


□HIS 


Auto Parse Refresh V, C:_- 





Dak 




<SEacJtPanel> 

<Conit=3cx Nam»="cbo:ays" MuCBldth" 
Selectedlndex="i"> 

<C :mbo Be x 1 1 sm > Fx a n ce< / C cat ; E c x I ' 
<CcmfcoB:x: -tK>=el3i?ue</C0W6oBOl 

<ComboB^xI-sm>Suisse<.'CcEifc:EcxI' 
^omboEcxI-aiw-lEal^e-O' ;:mic-5:xl' 



-i F 1=5' '-'icr-Dsc^t s:K3'\', -::v:5'..:.: 



A Figure 4-9 : Une 

simple ComboBox 
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Creer une ComboBox 



^^J^Comme pour le controle ListBox, I'attribut Sel ectedlndex permet de 
Renvoi selectionner une valeur par defaut. Voir page 92. 

L'attribut Is Editable permet de definir si oui ou non vous pouvez encoder une 
valeur differente d'une des valeurs de la liste. 



<ComboBox Name="cboPays" 
Selectedlndex="4" IsEditable="True" 
Height="20" Margin="2,2,2,2"> 
<ComboBoxI tem>France</ComboBoxI tem> 
<ComboBoxItem>Belgique</CornboBoxItem> 
<CoinboBoxIteni>Al 1 emagne</ComboBoxItem> 
<ComboBoxItem>Sm'sse</ComboBoxItem> 
<ComboBoxItem>Ital i e</ComboBoxItem> 
<ComboBoxItem>Espagne</ComboBoxItem> 

</ComboBox> 



| Auto Parse] ► Refresh. Courier New 




<Ccinfc-3cx Name="cb3?ay9" 
5e_e=redlndex»"4'* l3lc._Tab_e«' , Tru< 
BC14kt-*20" Ma-S-r>.-"2,2,2,2"> 
<C2mjj3ErxI-en:>rr3n:e< - C:Eiij2EcxI* 
<C2mjj2E:xI-sa:>5el3iq'Lie</CDmtG53: 
<C2mjjuE_x:-ex>«llemaone</C2mbQE: 
<CrmjcoE:xI 3sx>S--ia3*<-' --nfccEcxI* . 



Done Markjr. ievec I- l: : --cq'*'-i F es'.'-'icrcsc't SCKs'.Wiriiows'w-.r 
\Bin\xamlPad_Saved.xarnl. 



Figure 4-10 : Une 

ComboBox editable 



Le fait que ce controle soit editable a pour consequence qu'il possede a la fois 
des attributs de Li stBox et de TextBox. C'est pourquoi vous pouvez par exemple 
assigner l'attribut Text, qui aura pour effet de placer cette valeur dans la zone 
de saisie. 

^ L'attribut IsReadOnly 

L'attribut IsReadOnly provoque un comportement inattendu. En effet, le fait de 
placer le controle en lecture seule au moyen de cet attribut n'empeche pas I 
i'utilisateur de choisir dans la liste et ainsi de changer la valeur. Cet attribut I 
n'affecte que la zone de saisie du texte. Si vous desirez que la valeur ne puisse I 
etre changee, il est necessaire d'assigner la valeur Fal se a l'attribut IsEnabl ed. J 
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Si pour une raison particuliere vous desirez retirer la possibilite de rechercher 
dans la liste en tapant successivement les lettres du debut du mot recherche, 
l'attribut IsTextSearchEnabl ed doit etre mis a False. 

<ComboBox Name="cboPays" 
Selectedlndex="4" IsTextSearchEnabl ed="Fal se" 
Height="20" Margin="2,2,2,2"> 

<ComboBoxItem>France</ComboBoxItem> 

<ComboBoxItem>Belgique</ComboBoxItem> 

<ComboBoxItem>Al 1 emagne</ComboBoxItem> 

<ComboBox I tem>Su i s se</ComboBox I tem> 

<ComboBoxItem>Ital ie</ComboBoxItem> 

<ComboBoxI tem>Espagne</ComboBox I tem> 
</ComboBox> 

Toutefois, il est preferable de ne pas changer cette option. 



La case a cocher fait partie de la panoplie des controles indispensables pour 
realiser une interface graphique de qualite. Comme tous les controles vus 
precedemment, il s'utilise tres facilement. II suffit d'utiliser la balise CheckBox. 

<CheckBox Name="chkDispo" 

Margin="5,5,2,2" 

IsChecked="True"> 
Disponible en semaine 
</CheckBox> 



0 Disponible en semaire 



<Fage 

xmln3="r.ttp: 3r.he.rr.af .mrrra 2ft . rrrr. vir.r>: a"al: 
xmlna : x="hrtF! / /achemas.micrcsof" . ccm/vinf x l xait 
<St»c]cPanel> 



4.3 Creer une case a cocher 




Hi 



Auto Parse ► Refresh 



<Checic5cx Kame«"chkDispo" 
Kargins-S, 5, 2,2" 
l3Chec^ed="True"> 



Eispoiiifcle en semair.e 




Done. Markup saved to C:\Program Rles\Microsoft SDKs\Windows\vl.O 
\Bin\XamlPad_Saved.xaml. 



> 



< Figure 4-1 1 : Une 

case a cocher 
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L'attribut IsChecked recoit une valeur booleenne qui indique si par defaut la 
case est cochee ou non. Si vous ne souhaitez pas que la case soit cochee par 
defaut, vous pouvez bien sur omettre tout simplement cet attribut. 

Parfois, vous aurez besoin d'une case a cocher autorisant l'etat indetermine. 
C'est l'attribut IsThreeState qui va autoriser ce comportement. 

<CheckBox Name="chkDispo" 

Margin="5,5,2,2" 

IsThreeState="True" > 
Disponible en semaine 
</CheckBox> 



W XamlPad 



□ID® 



|f "Auto Parse | ► Refresh ^ j Courier New 



iHliDisp-orible en semaire 



er,if.^.::::?:::.::r. "i;.f>: >:a.r. 



Margm="5, 5,2,2" 

Cisponifcle en semair.e 



> 



Done. Markup saved to C:\Program Rles\Microsoft 5DKs\Windows\vl.O 
\Bin\XamlPad_Saved.xaml. 



■< Figure 4-1 2 : Une 

case a cocher dans 
l'etat indetermine 



Si vous souhaitez utiliser ce controle uniquement pour afficher une information 
mais que vous ne souhaitiez pas que l'utilisateur puisse modifier l'etat de la 
case a cocher, vous devez ici encore utiliser obligatoirement l'attribut IsEna- 
bled. 



<CheckBox Name="chkDi spo" 
Margin="5,5,2,2" IsEnabled="False" 
IsChecked="True" Content="Disponible en semaine" /> 
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xmlri3:x="h2 22 : e -j:.±::.i= .rr.2 31252 f2 . 2212 -ririfx xai: 
<=2a2itar.s:> 

<Chec»-=2x Kan«-"shiDi»po" 
Kargin»''5, 5,2,2" l3lnacled=": alae 
£aCbected»"Txue" Content*"Dispoiil] 
</Stac]cPanel> 
</Fage> 



< 



Done. Markup saved to C:\Program Rles\Microsoft 5DKs\Windows\vl.O 
\Bin\XamlPad_Saved.xaml. 



< Figure 4-13 : Une 

case a cocher 
desactivee 



e «\arque 

Of L'attribut Content 

Dans ce dernier exemple, le texte est assigne a l'attribut Content au lieu de 
placer dans le noeud. Le resultat est identique, c'est une question de gout 
personnel. 



lUt I 



4.4 Utiliser les boutons radio 

Le controle RadioButton est un autre moyen de faire un choix dans une liste. 
La syntaxe pour ajouter un bouton radio est fort simple. 

<RadioButton Name="rbllse" IsChecked="True"> 

J 'utilise XAML 
</RadioButton> 

Comme pour la case a cocher, nous retrouvons l'attribut IsChecked. A la 
difference de la case a cocher, les boutons radio sont associes les uns aux 
autres. Ce qui fait que, quand vous selectionnez un bouton radio, les autres sont 
automatiquement deselectionnes. 

<RadioButton Name="rbUseVB" IsChecked="True"> 

J 'utilise VB.NET 
</RadioButton> 

<RadioButton Name="rbUseCSharp"> 



102 • Le guide du codeur 



Utiliser les boutons radio 



J 'utilise C# 
</RadioButton> 

<RadioButton Name="rbUsedel phi "> 

J 'utilise Delphi.NET 
</RadioButton> 



U|[n|fx| 



I f ' Auto Parse | ► Refresh /g> 



D J'utilise VB.NET 
jj'utjltse C# 
JJ'utilise Oelphi.NET 



<Radi2Butt2n !*a:r.e="rfc r -*?e7E" ISuhec! 

J'utiliae 
</Radio5utton> 

<Radic3uttcn Naze="rfc r .;»eCSharp"> 

J'ucilise C* 
</RadioButton> 

|<Radic3u"cn lTaxe="rfc r -"5edelphi"> v 



Done. Markup saved to C:\Program Files\Microsoft SDKs\Wirvjows\vl.O 
\Bin\XamlPad_Saved.xarnl. 



Figure 4-1 4 : 

Utiliser des boutons 
radio 



Si vous desirez avoir dans un meme ecran plusieurs listes de boutons radio 
independantes les unes des autres, vous devez les integrer dans un ensemble. 
Dans les versions precedentes, nous aurions du utiliser une RadioButtonList 
mais elle n'est actuellement plus disponible en XAML. 

Pour regrouper des boutons radio dans des ensembles differents, le moyen le 
plus simple est de leur ajouter un attribut GroupName. Assignez la meme valeur 
a cet attribut pour tous les boutons radio devant etre associes. 

<RadioButton Name="rbUseVB" IsChecked="True" 
GroupName="grpLanguage"> 

J 'utilise VB.NET 
</RadioButton> 

<RadioButton Name="rbUseCSharp" GroupName="grpLanguage"> 

J 'utilise C# 
</RadioButton> 

<RadioButton Name="rbUsedel phi " GroupName="grpLanguage"> 

J 'utilise Delphi.NET 
</RadioButton> 

<RadioButton Name="rbUselO" GroupName="grpFramework"> 

J 'utilise le Framework 1.0 
</RadioButton> 

<RadioButton Name="rbUsell" IsChecked="True" 
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GroupName="grpFramework"> 

J 'utilise le Framework 1.1 
</RadioButton> 

<RadioButton Name="rbUse20" GroupName="grpFramework"> 

J 'utilise le Framework 2.0 
</RadioButton> 



| > Auto Parse ► Refresh *^ Courier Nev, 



Qdiixi 



iBiB 



JJ-jtlise VB.NET 
JutiliseC* 
J'utilise Delphi.NET 
J'utilise le Framework 1.0 
J'utilise le Framework 1.1 
J'utilise le Framework 2.0 



xialns : x="htrc : ? rr.er.a? .T.izrifift .2=n ""ir.::-: xar A 
| <Stac>rPanel> 

<Radi2zu- ten y=rr.e="rl:7?r"z" Ia~hec: 

J'utilise YE. KIT 
< /Radio3utton> 

<Radic3uttcri 17arr.e="rtl"seCS:iarF" Gr; 

J'utilise C# 
</RadioButton> „ 



Done. Markup saved to C:\Program Files\Microsoft SDKs\Windows\vl.O 
\Bin\XamlPad_Saved.xaml. 



A Figure 4-1 5 : 

Utiliser des boutons 
radio 



Une autre solution consiste a utiliser un controle conteneur separe pour chaque 
liste de boutons radio. Dans l'exemple ci-dessous, nous utiliserons deux 
StackPanel supplementaires. C'est pourquoi, pour cet exemple, le code complet 
vous est a nouveau presente. 

<Page 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<StackPanel> 
<StackPanel> 

<RadioButton Name="rbUseVB" IsChecked="True"> 

J'utilise VB.NET 
</RadioButton> 

<Radi oButton Name= " rbl)seCSharp"> 

J'utilise C# 
</RadioButton> 

<Radi oButton Name= " rbUsedel phi "> 

J'utilise Delphi.NET 
</RadioButton> 

</StackPanel> 
<StackPanel> 



104 • Le guide du codeur 



Utiliser les boutons radio 



<RadioButton Name="rbUsel0"> 
J 'utilise le Framework 1.0 
</RadioButton> 

<RadioButton Name="rbUsell" IsChecked="True"> 

J 'utilise le Framework 1.1 
</RadioButton> 
<RadioButton Name="rbUse20"> 
J 'utilise le Framework 2.0 
</RadioButton> 
</StackPanel> 
</StackPanel> 
</Page> 

Le resultat est identique a la methode precedente. Toutefois, l'utilisation d'une 
methode ou d'une autre peut influencer la mise en page. 

▼ Liste de choix non modifiable 

Pour rendre une liste de choix non modifiable, vous devez utiliser I'attribut I 
IsEnabled. Celui-ci doit etre applique sur chaque bouton radio. Toutefois, si elle I 
est incluse dans un conteneur qui lui est specifique, vous pouvez specifier I 
I'attribut IsEnabled dans le conteneur. Cette facon de faire est bien plus I 
pratique a bien des egards. J 



Normalement, il devrait etre possible d'utiliser un controle de type GroupBox au 
lieu d'un Canvas. Toutefois, dans la version beta utilisee au moment d'ecrire ces 
lignes, cette possibilite n'etait pas supportee. Le controle GroupBox existe bel et 
bien mais ne supporte qu'un enfant et ne permet des lors pas de regrouper les 
boutons radio. Son utilisation se limite a l'affichage du traditionnel contour. 

Son utilite reste malgre tout evidence pour rendre votre interface claire et bien 
comprehensible pour l'utilisateur. 

<Page xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml "> 
<StackPanel> 

<GroupBox BorderThickness="l" BorderBrush="Black" 
Header="Language" Width="150"> 
<StackPanel> 

<RadioButton Name="rbUseVB" IsChecked="True"> 

J 'utilise VB.NET 
</RadioButton> 

<RadioButton Name="rbUseCSharp"> 

J 'utilise C# 
</RadioButton> 
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<RadioButton Name="rbUsedel phi "> 

J 'utilise Delphi.NET 
</RadioButton> 
</StackPanel> 
</GroupBox> 

<GroupBox BorderThickness="l" BorderBrush=" Black" 
Header=" Framework" Wi dth=" 150"> 
<StackPanel> 

<RadioButton Name="rbUselO"> 
J'utilise le Framework 1.0 
</RadioButton> 

<RadioButton Name="rbUsell" IsChecked="True"> 

J'utilise le Framework 1.1 
</RadioButton> 
<RadioButton Name="rbUse20"> 
J'utilise le Framework 2.0 
</RadioButton> 
</StackPanel> 
</GroupBox> 
</StackPanel> 
</Page> 



|> AutoParsT ► Refresh 



r Language 

0 J'utilise VB.NET 

3 J'utilise C# 

O J'utilise Delphi.NET 



c Framework 

} J'utilise le Framework 1.0 
5 J'utilise le Framework 1.1 
J J 'utilise le Framework 2.0 



;'5.~e="rtU3e:ielf A 
J'utilise Delphi.NET 
</Radi=ButtDn> 
</S- aC kPanei> 

< > 



Done. Markup saved to C:\Program Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



< Figure 4-1 6 : 

Utilisation d'un 
GroupBox 



Notez au passage l'utilisation de l'attribut Header pour indiquer le titre de votre 
GroupBox. 



4.5 Placer des info-bulles 

Bien que, contrairement aux controles vus precedemment, la bulle d'informa- 
tion ne puisse exister sans un autre controle, une place privilegiee a ete reservee 
a cette fonctionnalite car les bulles d' information sont souvent trop peu utilisees 
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en dehors des programmes commerciaux. Pourtant, elles apportent un reel plus 
a votre developpement et, surtout, elles evitent pas mal d' incomprehension et 
de confusion pour l'utilisateur de votre interface. Pour des questions de place 
a l'ecran, les etiquettes precedant les differents champs de saisie ou de choix 
sont generalement fortement resumees et tres peu explicites. Les bulles 
d' information sont la pour pallier ce manque et constituent le premier niveau 
d'aide. 

Pour realiser une telle bulle, vous devez utiliser l'attribut Tool Tip du controle 
auquel la bulle d'information doit etre associee. 

A titre d'exemple, nous allons associer une bulle d'information a une boite de 
saisie de texte. 



<TextBox Name="txtNom" Margin="3,3,3,3" 
ToolTip="Dans ce champ vous devez introduire 

le nom de f ami 1 1 e de votre contact." /> 



• XamlPad 



BEE 



J * Auto Parse | ► Refresh Jj Courier New 



Dans ce champ vous devez introduire le nom de famille de votre contact. 



ft.com/winfx/avaian/2. 25" 
3 of - . c:rn-' T yir.f x/xacil '2' "5" > 



c-Hcm" : L :argm="3, 2, 3, 2" 

: ohamc vous de"ez introduire le ncm de famiLle 



Done. Markup saved to C:\ 3 rogran Files'.'-'icrosc^t 5CKs',Wircoivs'',vl.O 
\Brn\XamlPad_5aved.xaml. 



< Figure 4-1 7 : Une 

info-bulle 



Cette fagon de faire est toutefois limitee a la presentation sur une seule ligne. 
Pour ameliorer notre info-bulle, nous devons utiliser une syntaxe legerement 
plus compliquee en la definissant comme un noeud fils. 

<TextBox Name="txtNom" Margin="3,3,3,3"> 
<TextBox.ToolTip> 

<TextBlock MaxWidth="200" 
TextWrappi ng="WrapWi thOverf I ow" > 
Dans ce champ vous devez introduire le nom 
de famille de votre contact. 
</TextBlock> 
</TextBox.ToolTip> 
</TextBox> 
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De cette facon, le texte d'information est alors inclus dans un bloc de texte, ce 
qui permet d'ajuster les attributs d'affichage pour obtenir le resultat souhaite. 
Dans l'exemple, la taille de la bulle est limitee a 150 pixels et le texte passe 
automatiquement a la ligne en etendant la zone autant que necessaire. 




Dans ce charrp vous devez introduire le 
rorn de famlle de vptre contact. 



y.ar3-r.= 



<Stac]cPanel> 

<Texr2cx Kaxe="txtyc: 
<Text5cx . ToclT-p> 

<Te:-:tzl: 2k ::a:-:>"i z\zh="2 ; I " 
TextWrappi:io;= "Krapni thCve r f 
Zana ce champ vcua devez 
:e fa.rr.ille ie "--re 2:r:ia 
</TextBlock> 



Done. Markup saved to C:\Program Rles\Microsoft SDKs\Windows\vl.O 
\Bin\XamlPad_Saved.xarnl. 



< Figure 4-18 : Une 

info-bulle sur plusieurs 
lignes 



Outre le passage a la ligne, cette facon d'aborder le probleme offre egalement 
la possibility d'enrichir la presentation du contenu. 



<TextBox Name="txtNom" Margin="3,3,3,3"> 
<TextBox.ToolTip> 

<TextBlock MaxWidth="200" 
TextWrappi ng="WrapWi thOverf I ow" > 
<Image Width=" 16" Height="16"> 
<Image.Source> 

C : \Wi ndows\Mi crosof t . NET\Wi ndows\ 
v6 . 0 . 5070\Aval on\aval onArp . i co 
</Image.Source> 
</Image> 

Dans ce champ vous devez introduire 
le <Bold>nom</Bold> de <Underl i ne>f ami 1 1 e 
</Underline> de votre contact. 
</TextBlock> 

</TextBox.ToolTip> 
</TextBox> 
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EM 


xl 


Au:o Parse | ► Refresh ■ ■ A m ± Courier New ill, 




^5 Dans ce champ vous devez introduire 
le nom de famille de votre contact. 












<Stack:Panel> 

<TextE = x Ka.T.e="tst::2T." M=r ?ir,= " 3 , z , 3 , 3 "> 
<Tex-Bcx."02lTip> 

<7=>:tEl;ck' y.3.:-:"i i~ ;■".= " 2 I I " 
Tex tWr apping- "Wr apWi thOver f 1 ow " > 
<Iraage Width-" 16" Height="16"><: 
Zans ce chaxp voua devez introd 
de <Under iinof ami lie</ under 1 in 


V 


||_^ 


£ 




Done. Markup saved to C:\Program Files\Microsoft 5DKs\Windows\vl.O 
\Bin\XarnlPad_Saved.xaml. 



< Figure 4-1 9 : Gras 
et italique dans une 
info-bulle 



4.6 Utiliser les panneaux a onglets 

Une derniere facon de realiser une mise en page est d'utiliser un panneau a 
onglets. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xainl /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<TabControl MinWidth="300" MinHeight="300"> 
<TabItem Header="Photol"> 

<Image Source="C:\Documents and Settings\ 
All Users\Documents\Mes images\ 
Echantillons d'images\Collines.jpg" /> 

</TabItem> 

<TabItem Header="Photo2"> 

<Image Source="C:\Documents and Settings\ 
All Users\Documents\Mes images\ 
Echantillons d'images\ 
Coucher de soleil.jpg" /> 

</TabItem> 

<TabItem Header="Photo3"> 

<Image Source="C:\Documents and Settings\ 
All Users\Documents\Mes images\ 
Echantillons d'images\Hiver.jpg" /> 

</TabItem> 

<TabItem Header="Photo4"> 

<Image Source="C:\Documents and Settings\ 
All Users\Documents\Mes images\ 
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</TabItem> 

</TabControl> 
</Page> 



Echantillons d'images\Nenuphars.jpg" /> 
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> - 



Photol Photo2 Photo3 Phottrt 




<Fage 
< 



Done. Markup saved to C:\Program Rles\Microsoft SDKs\Windows\vl.O 
\Bin\XamlPad_Saved.xaml. 



< Figure 4-20 : 

Utilisation des onglets 



Bien qu'il represente une surface, le TabControl est plus proche des controles 
de type TextBox que du Canvas, par exemple. En effet, chaque nceud Tabltem ne 
peut avoir qu'un seul enfant. 



►Poi/r pallier ce probleme, la solution est tres simple et revient a 
Renvoi appliquer les regies qui sont vues dans le chapitre Melanger les 
techniques de mise en page (voir page 81). 

Ajoutez ce Tabltem a notre code precedent. 

<TabItem Header="Miniatures" IsSelected="True"> 
<Grid> 

<Gri d . Col umnDef i ni ti ons> 

<Col umnDef i ni ti on/> 

<Col umnDef i ni ti on/> 
</Gri d . Col umnDef i ni ti ons> 
<Gri d . RowDef i ni ti ons> 

<RowDefinition/> 

<RowDefinition/> 
</Gri d . RowDef i ni ti ons> 
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<Imag6 Gri d . Col urnn = "0" Gri d . Row = "0" 




Source = "C : \Documents and SBtti ngs\Al 1 


Users\ 


Dnrumpnt^VMp^ imaap^V Frhant i 1 1 nn^ d 1 


imaap^\ 


Pol 1 i np^ i nn 11 /"*> 




<Image Grid. Col urnn="0" Grid.Row="l" 




Source = "C : \Documents and SBtti ngs\Al 1 


Users\ 


Dnrumpnt^VMp^ imaap^V Frhant i 11 nns d 1 


imaap^V 


Pnurhpr Hp ^nl pi 1 inn" 




<Irricige Gri d . Col umn = " 1 11 Gri d . Row = "0" 




Source="C : \Documpnts and SBtti ngs\Al 1 


Users\ 


DocumGnts\Mes iinagp.s\Echanti 1 1 ons d 1 


images\ 


Hiver.jpg" /> 




<Image Grid. Col umn="r' Grid.Row="l" 




Source="C:\Docunients and Setti ngs\A1 1 


Users\ 


Documents\Mes images\Echanti lions d 1 


images\ 


Nenuphars.jpg" /> 




</Grid> 




</TabItem> 
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< Figure 4-21 : 

Utilisation des onglets 




^arque 

^* Utilisation de IsSelected 

Remarquez au passage I'utilisation de IsSelected pour specifier un onglet par 
defaut different du premier. 



)ar^ 
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4.7 Creer un bouton automatique 

Nous avons deja vu le bouton classique precedemment mais, dans certaines 
circonstances, son utilisation peut se reveler peu pratique. Prenons un exemple : 
si vous desirez utiliser un bouton pour faire defiler des donnees dans un ecran, 
avec un bouton traditionnel vous devrez cliquer de maniere repetee. Pour eviter 
cela, vous disposez d'un bouton particulier appele RepeatButton qui va repeter 
automatiquement le clic tant que vous maintiendrez la pression sur le bouton. 

<RepeatButton Name="btnSuivant" 
Width="80" Height="30"> 

Suivant 
</RepeatButton> 

Pour obtenir un controle efficace du comportement de ce bouton a repetition, 
nous disposons tout d'abord de l'attribut Interval, qui determine le temps entre 
deux appels de Taction associee au bouton. 

<RepeatButton Name="btnSuivant" 

Width="80" Height="30" 

Interval="100"> 
Suivant 
</RepeatButton> 

Dans l'exemple, l'operation Suivant sera effectuee tous les dixiemes de 
seconde. 

Pour eviter que la repetition ne demarre directement, vous pouvez imposer un 
delai. Si la pression sur le bouton est inferieure au delai, il se comportera 
comme un bouton normal. En revanche, si la pression se prolonge au-dela du 
delai fixe, la repetition de tache va pouvoir demarrer. Pour controler ce delai, 
vous disposez de l'attribut Delay. 

<RepeatButton Name="btnSui vant" 
Delay="500" Interval ="100"> 

Suivant 
</RepeatButton> 

Dans cet exemple, le delai est fixe a une demi-seconde (500 milliemes). 
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<Seack&aael> 

<Repear5u" = r. Kaxe="tt nSuivant" 
Delay-"500" Int»rv»l-"100"> 
Suivant 
</BepeBtBattoo> 



</S-ack-Panel> 



</Page> 
< 



Done. Markup saved to C:\Program Rles\Microsoft SDKs\Windows\vl.O 
\Bin\XamlPad_Saved.xarnl. 



■4 Figure 4-22 : Le 

bouton a repetition 



^ Duree du traitement 

La duree du traitement a realiser a chaque repetition ne peut exceder I'inter- 
valle prevu entre chaque repetition. Dans le cas contraire, le traitement 
pourrait se poursuivre encore un certain temps apres que I'utilisateur eut 
relache le bouton. 



Comme vous pouvez le constater, visuellement, il n'y a aucune difference entre 
les deux types de boutons. 

Si vous desirez visuellement identifier ce type de bouton, vous pouvez adapter 
pour lui votre charte graphique en changeant par exemple la couleur du fond. 
Pour rappel, vous disposez pour cela de l'attribut Background. Vous pouvez 
egalement jouer sur l'effet visuel lie a la forme du curseur de la souris. 

<RepeatButton Name="btnSuivant" 

Delay="500" Interval ="100" 

Cursor="Hand"> 

Suivant 
</RepeatButton> 

Dans 1' exemple ci-dessus, le curseur de la souris est transforme en une main 
lors du passage sur le bouton. 
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4.8 Utiliser un Slider 

Le SI ider offre un moyen tres visuel pour introduire une valeur numerique. II 
est souvent utilise lorsque la valeur a une action directe sur l'interface 
utilisateur, comme un zoom. Ce controle dispose en plus des attributs courants, 
d'un nombre important d'attributs permettant de lui donner le comportement 
voulu. Commencons par un Slider simple permettant de definir une valeur 
entre 0 et 100. 



<Slider Width="200" Vertical Al ignment="Center" 
Minimum="0" Maximum="100" Value="50"/> 



| Auto Parse , ► Refresh 



: 



r*3="hzvc : / 1 schemas .micrcsof r . com/vmf x/ava — 
ns:x="hT:tp: / /achemaa .microscfr . ccm/vmfx/x 



Done. Markup saved to C:\Program Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xami. 



Generalement, ce genre de controle dispose de reperes visuels. II existe deux 
possibilites pour les ajouter, en utilisant soit l'attribut TickFrequency, qui vous 
permet de definir l'ecart entre chaque repere : 

<S1 ider Width="200" Vertical Al ignment="Center" 
Minimum="0" Maximiim="100" Value="50" 
Ti ckFrequency=" 10" Ti ckPl acement="BottomRi ght"/> 

soit l'attribut Ticks : 

<S1 ider Width="200" Vertical Al ignment="Center" 
Minimum="0" Maximiim="100" Value="50" 
Ticks="10,20,30,40,50,60,70,80,90" 
TickPlacement="BottomRight"/> 



< Figure 4-23 : 

Utilisation d'un Slider 



114 • Le guide du codeur 



Utiliser un Slider 



Ce dernier est plus contraignant mais permet d' avoir des reperes qui sont 
irreguliers. 

En plus des reperes visuels, vous pouvez ajouter automatiquement la valeur 
dans un Tool Tip. 

<Slider Width="200" VerticalAl ignment="Center" 
Mim'mum="0" Maximum="100" Value="50" 
Ticks="10,20,30,40,50,60,70,80,90" 
TickPlacement="BottomRight" 

AutoTool Ti pPl acement="TopLeft" AutoTool Ti pPreci sion="0" 

/> 



D XamlPad 
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AutoToolTipPlacenent«"TopLeft" ftutoToolTi 

/> 



Done. Markup saved to C:\?rogram Files'. r-'icrcsc^t SDKs 
\Windows\vl.O\Bm\XamlPad_Saved.xaml. 



< Figure 4-24 : Un 

Slider avec reperes 
visuels 



v uce 

Limiter les valeurs aux reperes 

Avec I'attribut IsSnapToTickEnabled, les valeurs sont automatiquement arron 
dies au repere le plus proche. 



■J 



II est egalement possible de modifier la valeur sans deplacer le curseur mais en 
cliquant sur la barre. LargeChange permet de definir la valeur qui sera ajoutee 
ou retiree automatiquement a chaque clic. Les attributs Delay et Interval 
permettent de moduler automatiquement la repetition de Taction. 
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<S1 ider Width="200" Vertical Al ignment="Center" 
Minimum="0" Maximiim="100" Value="50" 
Ticks="10,20,30,40,50,60,70,80,90" 
TickPlacement="BottomRight" 

AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="0" 
LargeChange="10" Delay="500" Interval ="200" 

/> 

Vous pouvez egalement definir une zone visuelle ou devrait se trouver la valeur. 
Cette zone est un attribut purement visuel mais ne limite en rien les valeurs 
possibles. 

<S1 ider Width="200" Vertical Al ignment="Center" 
Minimum="0" Maximum="100" Value="50" 
Ticks="10,20,30,40,50,60,70,80,90" 
TickPlacement="BottomRight" 

AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="0" 

LargeChange="10" Delay="500" Interval="200" 

IsSel ecti onRangeEnabl ed="True" 

Sel ecti onStart="20" Sel ecti onEnd="80" 

/> 



• XamlPad . || 
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Ilk' A \ 




SelectionStBXt«"20" SeiectionEiKJ»**80" 


A 


/> 




|e/Page> 


V, 


< J 


> 


Done. Markjp saved to C:\Prograrrc Files\Micrcscft SDKs 




\Windows\vl.O\Bin\XarnlPaC_Saved.xaml. 





Figure 4-25 : Un 

Slider avec une zone 



Si vous preferez un SI ider vertical, aucun probleme, la propriete Orientation 
vous permet de choisir entre horizontal (par defaut) ou vertical. 

<S1 ider Horizontal Al ignment="Center" 
Minimum="0" Maximum^ 1 100" Value="50" 
Ticks="10,20,30,40,50,60,70,80,90" 
TickPlacement="BottomRight" 

AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="0" 
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LargeChange="10" Delay="500" Interval ="200" 
I sSel ecti onRangeEnabl ed="True" 
Sel ecti onStart="20" Sel ecti onEnd="80" 
Height="200" Orientation="Vertical " 

/> 



• XamlPad EM® 




Xir.ix - jm="3" H5xunum-"1D0" Va 



Done. Markup saved to C:\Program Files\Microsoft SDKs 
\Windo\vs\vl.o\Bin\XamlPad_Saved.xaml. 



Figure 4-26 : Un 

Slider vertical 



^ention ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

7* Definition de la taille 

En orientation verticale, la taille est controlee non plus par I'attribut Width mais 
bien par I'attribut Height. 



ais^ 



Bien stir, ce controle accepte les attributs habituels. 

<S1 ider Horizontal Al ignment="Center" 
BorderBrush="Black" BorderThickness="l" 
Foreground="Blue" Background="LightGray" 
Minimum="0" Maximum="100" Value="50" 
Ticks="10,20,30,40,50,60 > 70,80,90" 
TickPlacement="BottomRight" 

AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="0" 
LargeChange="10" Delay="500" Interval ="200" 
I sSel ecti onRangeEnabl ed="True" 
Sel ecti onStart="20" Sel ecti onEnd="80" 
Height="200" Orientation="Vertical " 
/> 



Le guide du codeur • 117 



Les autres controles de base 



|f; Auto Parse | ► Refresh 



</Page> 
< 



Done. Markup saved to C:\Program Files\Microsoft SDKs 
\Windows\vl.0\8in\XarnlPad_Saved.xaml. 



< Figure 4-27 : Un 

Slider colore 



4.9 Utiliser un Expander 

Si vous avez beaucoup d' informations a afficher sur votre ecran, il peut 
rapidement devenir surcharge et peu lisible. Pour remedier a cela, vous pouvez 
comme nous l'avons vu precedemment utiliser les onglets. 



f^^^Pour plus d 'informations sur I'utilisation des onglets, voyez le 
Renvoi chapitre Utiliser les panneaux a onglets page 109. 

Une autre solution est d'utiliser un Expander. Celui-ci a la faculte d'afficher ou 
de cacher son contenu en ne laissant alors visible que son titre. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Title="Expander" 

> 

<StackPanel> 

<Expander Header="Informations" IsExpanded="fal se"> 

<TextBlock> 

Cette zone contient un texte d 1 information 

</TextBlock> 
</Expander> 
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Un Expander peut parfaitement contenir plus d'un controle utilisateur mais, 
dans ce cas, ils devront etre encapsules dans un conteneur. 

<Expander Header="Contenu" IsExpanded="true"> 
<StackPanel> 
<WrapPanel> 

<Label Width="60"> 

Nom: 
</Label> 

<TextBox Name="txtNom" Wi dth=" 150"/> 
</WrapPanel> 
<WrapPanel> 

<Label Width="60"> 
Prenom: 

</Label> 

<TextBox Name="txtprenom" Wi dth=" 150"/> 
</WrapPanel> 
</StackPanel> 
</Expander> 

<Expander Header="Plus"> 
<WrapPanel> 

<Label Width="60"> 

Tel: 
</Label> 

<TextBox Name="txttel " Wi dth="150"/> 

</WrapPanel> 
</Expander> 
<Button Width="80"> 

Ok 

</Button> 
</StackPanel> 
</Page> 



BEE 
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brfanrattom s ; 


Contenu 






Nom: 






Prenom: 






Plus 








1 <* 1 




Ok 

</Button> 


i ■ 3Bj 1 


Done. Markjp saved to C:\Program Files\Microscft SDKs 
\Windows\vl.O\Bin\Xarn!Pad_Saved.xarnl. 



< Figure 4-28 : 

Utilisation d'Expander 
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Pour ouvrir ou fermer un Expander, il suffit d'utiliser les fleches sur sa droite ; 
l'orientation des fleches indique s'il est ouvert ou ferme. Si les fleches sont 
dirigees vers le bas, le contenu est cache. A contrario, si les fleches sont dirigees 
vers le haut, le contenu est affiche. 



«B XamlPad 




□@ 




* Auto Parse 


^ Refresh 






Info-Tidier-: 








Cette zone contient un texte d 'information 


£ontenu ~ j 


Nom: 








Prenom: 








Plus 










Tel: 












1 °* | 






J,; 

</Button> 








< 






■ 




Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



Figure 4-29 : 

L'utilisateur a ouvert 
tous les Expander 



Comme vous pouvez le constater, il est possible de mettre plusieurs Expander 
dans une meme page. En revanche, un Expander ne peut avoir qu'un seul nceud 
enfant. Celui-ci sera des lors souvent un conteneur comme un StackPanel. 
Notez dans l'exemple l'utilisation combinee de StackPanel et de WrapPanel. 

L'attribut Header permet de determiner le titre, alors que l'attribut IsExpanded 
indique si la zone est cachee (f al se) ou affichee (true). Par defaut, le contenu 
est cache. 

Notez que le bouton ne sera jamais cache car il n'est pas repris dans une balise 
Expander. 



^uce 

Direction d'expansion 

Si vous souhaitez que la zone s'ouvre vers le haut plutot que vers le bas, util 
l'attribut ExpandDi recti on et assignez-lui la valeur Up. 



sez^ 
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4.10 Utiliser une ViewBox 

La ViewBox permet de definir une zone ecran dont le contenu pourra etre 
automatiquement adapte a la taille de la zone. L' adaptation se fait en etendant 
verticalement, horizontalement ou dans les deux sens le contenu. 

<Page 

xmlns= 

"http: // schemas . mi crosof t . com/wi nf x/2006 /xaral /presentat i on " 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 

> 

<StackPanel> 

<Viewbox MaxWidth="150" MaxHeight="150" 
Stretch="Fill " StretchDirection="Both"> 
<TextBlock> 

TEXT 
</TextBlock> 
</Vi ewbox> 
</StackPanel> 
</Page> 



% XamlPad 
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TEXT 



xrr.lr.3 : x="http : 3 rr.en-.3f . rr.irr :3: z -. . - 
Title="P333:" 



Done. Markup saved to "C:\Program Rles\Microsoft SDKs 
\Windov«\vl.0\&n\XamlPad_5aved.xaml". 



< Figure 4-30 

Affichage d'une 
ViewBox 



Grace a l'option Stretch=" Fill ", le contenu occupe automatiquement l'entie- 
rete de la ViewBox. L'attribut StretchDi recti on vous permet de limiter l'agran- 
dissement au sens horizontal ou vertical. Si vous changez la largeur de 150 en 
50, le contenu est modifie en fonction. 
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<s> 




anel> 

ocx MaxWidtll- 
xcEloclo 



< 



150" Stretch- 
■i 



Done. Markup saved tc "C:\Prograrn Files\Microsoft SDKs 
\Windows\»1.0\Bin\XamlPad_Saved.xaml". 



< Figure 4-31 : La 

meme ViewBox 
modifiee 



Selon la valeur donnee a l'attribut Stretch, le resultat sera fort different. Pour 
bien comprendre le fonctionnement de chacune de ces valeurs, voici un autre 
exemple. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nfx/2006/xaml " 

> 

<WrapPanel> 

<Border BorderBrush="Black" BorderThickness="l" 
Margin="5,5,5,5"> 
<Viewbox Width="70" Height="100" 
Stretch="None" StretchDirection="Both"> 
<Image Source="c: \Mir.bmp" Width="50" 
Height="50"/> 
</Viewbox> 
</Border> 

<Border BorderBrush="Black" BorderThickness="l" 
Margin="5,5,5,5"> 
<Viewbox Width="70" Height="100" 
Stretch="Fi 11" StretchDirection="Both"> 
<Image Source="c: \Mir.bmp" Width="50" 
Height="50"/> 
</Viewbox> 
</Border> 

<Border BorderBrush="Black" BorderThickness="l" 
Margin="5,5,5,5"> 
<Viewbox Width="70" Height="100" 
Stretch="Uniform" StretchDi recti on=" Both "> 
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<Image Source="c:\Mir.bmp" Width="50" 

Height="50"/> 
</Viewbox> 

</Border> 

<Border BorderBrush="Black" BorderThickness="l" 
Margin="5,5,5,5"> 
<Viewbox Width="70" Height="100" 
Stretch="UniformToFil 1 " StretchDi recti on=" Both "> 
<Image Source="c:\Mir.bmp" Width="50" 
Height="50"/> 
</Viewbox> 
</Border> 
</WrapPanel> 
</Page> 



I f ' Auto Parse] ► Refresh J, 



r 



K 



X 



<5order E2rderEru?h="5l5rk" Bcrcier' 

■l 



Done. Markup saved to "C:\Prograrn Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml". 



< Figure 4-32 : Effet 
de I'attribut Stretch 



Pour une question de clarte de l'exemple, la taille de l'image est fixee dans le 
code a 50 sur 50 et est placee dans quatre ViewBox identiques a l'exception de 
la valeur de I'attribut Stretch. Les balises Border sont uniquement presentes 
pour delimiter visuellement 1' emplacement des ViewBox. Le resultat parle de 
lui-meme. 



4.11 Utiliser un Popup 

Le Popup permet d'ouvrir une zone ecran contenant n'importe quel contenu 
XAML. II est parfois confondu a tort avec les tooltips, dont il peut simuler 
l'utilisation. En effet, I'attribut PI acementTarget permet d'associer le Popup a 
un autre element de l' ecran tandis que PI acementRectangl e permet d'en definir 
les dimensions. Pour utiliser un Popup, il faut aussi utiliser du code .NET. 

Pour bien comprendre son utilisation, il est necessaire de comprendre egale- 
ment la gestion des evenements. Si tel n'est pas votre cas, sachez seulement 
que, lorsque vous cliquez sur le bouton Cliquer pour ouvrir, la methode 
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Aff i chePopup est executee et que, lorsque vous cliquez sur le bouton Cliquer 
pour fermer, c'est la methode CachePopup qui est executee. 

gestion des evenements sera abordee dans un chapitre specifique 
Renvoi page 138. 

<Page x:Cl ass="Pagel" 
xmlns= 

"http : //schemas .mi crosoft . com/wi nfx/2006/xaml /presentati on" 
xml ns : x=" http : //schemas .mi crosoft . com/wi nf x/2006/xaml " 

> 

<StackPanel> 

<Button Name="MonBouton" Click="AffichePopup"> 

CI iquez pour ouvrir 
</Button> 

<Popup Name="MonPopup" 
PI acementTarget=" { Bi ndi ng El ementName=MonBouton } " 
PlacementRectangle="30,20,100,40"> 
<Border BorderThickness="l" BorderBrush="Black"> 
<StackPanel Margin="5,5,5,5" 
Background="Al iceBl ue"> 
<Label> 

Ceci n'est pas un tooltip mais 
un popup et peut etre une page 
a part entiere 
</Label> 

<Button Click="CachePopup"> 

Cliquez pour fermer 
</Button> 
</StackPanel> 
</Border> 
</Popup> 
</StackPanel> 
</Page> 



1 Interaction logic for Pagel.xaml 
Partial Public Class Pagel 
Inherits Page 

Public Sub New() 

Initial izeComponentQ 
End Sub 

Public Sub Affi chePopup (ByVal sender As Object, ByVal e As 
RoutedEventArgs) 
Me.MonPopup. IsOpen = True 
End Sub 
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Public Sub CachePopup(ByVal sender As Object, ByVal e As 
RoutedEventArgs) 
Me.MonPopup. IsOpen = False 
End Sub 
End Class 



M WinFxBrowserApplicationl - Microsoft Internet ... f-~||5]|5<j 



Fichier Edit View Atteindre Favoris ? 

Precedente - - jxj [^] JD Rechercher 



Adresse C:\DQCumen ts and 5ettings\jf\Local Settinc v | H OK Lie 



Cliquez pour ouvnr 



< Figure 4-33 : Le 

Popup ferme 



Comme vous pouvez le constater, rien ne suggere qu'il puisse y avoir un 
Popup. 



I WinFxBrowserApplicationl - Microsoft Internet ... f^~ | fn||5<] 



Fichier Edit View Atteindre Favoris ? 

Q Precedente * Q ' \*\ L*l] ' ti Rechercher 
Adresse j£] C:\Documents and 5ettings\jf\Local Setting v £^ 0K Uens 



Cliquez pour ouvrir 



Ceci n'est pas un tooltip mais un popup et peut etre une page a part enbere 



Cliquez pour ferrner 



I 



S 



< Figure 4-34 : Le 

Popup ouvert 
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4.12 Ajouter de la video dans la fenetre 

Pour visionner une video ou simplement jouer de la musique, vous pouvez 
utiliser la classe MediaElement. Elle s'utilise assez simplement mais dispose 
bien sur de proprietes et methodes pour la gestion telles simplement les 
methodes Play, Pause et Stop. 

<Page xmlns= 

"http : //schemas .mi crosoft . com/wi nfx/2006/xaml /presentati on" 
xml ns : x=" http : //schemas .mi crosoft . com/wi nf x/2006/xaml "> 
<Grid Background="Bl ack"> 

<Border Wi dth="300" Height="200" Name="Movie" 
BorderBrush="white" CornerRadius="2" 
BorderThickness="2"> 
<MediaElement LoadedBehavior="Play" 
Source="c:\News.wmv" /> 
</Border> 
</Grid> 
</Page> 



\^ C:\test-xaml - Windows Internet Explorer 

|® C:\testxjml 

& "S" W C:\testxaml 



kdrSil^j 



*t | x 1 1 •■<$; 



msdn 

News 
Update 



Figure 4-35 : 

Visionner une video 



MediaElement est simplement placee dans un cadre. La propriete Source permet 
de definir le fichier multimedia qui devra etre utilise. La propriete LoadedBe- 
havior permet de determiner Taction qui sera prise directement apres le 
chargement du controle. La propriete UnloadedBehavior a le meme effet mais 
lors du dechargement du controle. Les valeurs possibles sont Stop, PI ay, CI ose, 
Pause, NoSet et Manual. 
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^ention ^^^^^ 

▼ Ecran vide 

II est possible que l'emplacement ou devrait se trouver la video reste vide. II 
s'agit d'un probleme de pilote de la carte ecran qui n'est pas adapte. En effet, 
Medi aEl ement requiert un pilote recent et adapte. Si c'est votre cas, essayez de 
mettre a jour votre pilote. C'est aussi pour cette raison que I'ecran vous est 
presente sous Windows Vista et non sous Windows XP comme les autres 
ecrans. 



II existe egalement une classe SoundPlayer et une MediaPlayer. SoundPlayer ne 
peut etre utilisee directement en XAML mais uniquement en code .NET. De 
maniere generale, l'utilisation de Medi aEl ement est tres largement privilegiee, et 
tout particulierement dans le code XAML. 

II est possible egalement d'utiliser les Triggers pour manipuler la video depuis, 
par exemple, des boutons. Dans l'exemple qui suit, un bouton Play permet de 
demarrer la video et un bouton Pause permet de l'arreter. 



0^^^5z vous voulez plus d'informations sur les triggers, reportez-vous au 
Renvoi chapitre Utiliser les Triggers page 238. 

<Window x:Class="Windowl" xmlns= 
" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="WindowsApplication8" Height="300" Width="300" 

> 

<Window.Triggers> 



Le trigger suivant sera declenche lors du clic sur le bouton btnPlay. 



<EventTrigger RoutedEvent="Button.Cl ick" 
SourceName="btnPl ay"> 
<EventTrigger.Actions> 

<BeginStoryboard Name= "Debut"> 
<Storyboard> 



Le storyboard a defini une MediaTimeLine qui est une TimeLine specifique aux 
elements multimedias. C'est ici qu'est definie la source. 



<MediaTimel ine Source= 


'c:\news.wmv" 


Storyboard. TargetName=' 


laVideo"/> 


</Storyboard> 




</Begi nStoryboard> 




</EventTri gger . Acti ons> 




</EventTrigger> 
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Le trigger suivant sera declenche lors du clic sur le bouton btn Pause. 



<EventTrigger RoutedEvent="Button.Cl ick" 
SourceName="btnPause"> 
<EventTrigger.Actions> 



La commande suivante met en pause le storyboard appele Debut. 



<PauseStoryboard 

Begi nStoryboardName= " Debut " /> 
</EventTri gger . Acti ons> 
</EventTrigger> 
</Wi ndow . Tri gger s> 
<StackPanel> 



Aucune source n'est definie pour le MediaElement. 

<MediaElement Height="100" Width="150" Name="laVideo"/> 
<Button Name="btnPlay" >Play</Button> 
<Button Name="btnPause" >Pause</Button> 
</StackPanel> 
</Wi ndow> 
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< Figure 4-37 : La 

video affichee 



^arque 

^ Methodes de MediaElement 

Vous pouvez remarquer qu'a aucun moment nous n'avons utilise les methodes 
Start et Pause de la classe MediaElement. 



es^ 



4.13 Checklist 

Ce chapitre a ete l' occasion de passer en revue les differents controles 
permettant de realiser une interface utilisateur complete. C'est-a-dire : 

■ creer et manipuler les listes deroulantes, que ce soient les ListBox ou les 
ComboBox ; 

■ utiliser les cases a cocher (CheckBox) ; 

■ utiliser les boutons radio (RadioButton) et les grouper; 

■ creer des info-bulles (Tool Tip) ; 

■ creer un panneau a onglets (TabControl) ; 

■ configurer un bouton pour le rendre autorepetitif ; 

■ utiliser un curseur (SI ider) pour determiner une valeur ; 

■ utiliser des Expander pour rendre l'interface plus lisible ; 

■ utiliser une ViewBox ; 

■ creer des fenetres Popup ; 

■ manipuler le multimedia avec MediaElement. 
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5.1 Creer une application Windows 

Apres avoir manipule le XAML avec XAMLPad, voyons maintenant comment 
realiser une application. Dans le domaine, nous jouerons la conformite avec le 
tres traditionnel "Hello World". 

Pour commencer, ouvrez Visual Studio. Choisissez Fichier, Nouveau, Projet. 



Nn uvea ii projet f?~|fx" 



Modeles : 



Modeles Visual Studio ins ta lies 




m 












^■Application ■ 


WinFX Windows 


WinFX Web Bibliotheque de WinFX Service 


Application 


WinFX Custom 




H Windows 1 


Application 


Browser ,,, classes Library 


console 


Control Library 




1 












Starter Kit Ma 


Starter Kit Ecran 










cinematheque 


de veille 










Mes modeles 
























Projet de creation d'une application avec une interface utilisateur Windows 



Nom : WindowsApplicationl 



OK [ Annuler ] 

A Figure 5-1 : Choix du type de projet 
Dans la fenetre des projets, choisissez le type WinFX Windows Application. 



marque ^^^^^^^^^^^^^^^^^^^^^^ 

Ce type n'est pas present 

Si vous ne trouvez pas ce type de projet dans Visual Studio, c'est que vous 
n'avez pas installs- le kit de developpement ou, selon les versions, \'add-in pour 
Visual Studio. Vous le trouverez sur le site de Microsoft. 



Donnez un nom a l'application, par exemple Hel loWorld. 



iUS 

>ur 



Expbrateur de solutions 



_v WindowsApplicationl 

B| My Project 

app.config 
l^] MyApp.xaml 

MyApp.xaml.vb 

^] Windowl.xaml.vb 



-4 Figure 5-2 : L'explorateur de 
solution dans un projet WinFX 
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jji Windows Application 1 

+ My Project 
S «J References 

£j [^J bin 



3 
& 



+ . obi 

6 B1 BBBHH!! 

*^ Form 1. Designer. vb 



Figure 5-3 : L'explorateur de 
solution dans un projet WinForm 



Au lieu du traditionnel Forml.vb, vous retrouvez quatre fichiers differents. lis 
sont associes par paire : les fichiers MyApp.xaml et MyApp.xaml.vb, d'une part, 
et les fichiers Window 1 .xaml et Window1.xaml.vb, d'autre part. Chaque paire de 
fichiers prend en charge la gestion d'une classe. II est vrai que, si vous avez 
deja travaille avec Visual Studio 2005, vous savez que derriere le fichier 
Forml.vb se cachait un fichier Form1.Designer.vb. Le but dans les deux cas est 
le meme : separer le code d'affichage du code de traitement. 

Mais revenons a notre projet et examinons pour commencer le fichier MyAp- 
p.xaml. 

Application x:Cl ass="MyApp" 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
StartupUri="Windowl.xaml "> 
<Appl i cati on . Resources> 

</Appl ication.Resources> 
</Appl ication> 

A priori, il est probable que vous n'ayez pas a changer ce fichier sauf l'attribut 
StartupUri, qui definit la classe a instancier et a executer au demarrage de 
l'application. II ne serait pas de bon ton de conserver pour votre classe le nom 
par defaut. Remplacez Windowl .xaml par HelloWorld.xaml. 

Le fichier code .Net associe est encore plus simple. 

1 Interaction logic for MyApp.xaml 
Partial Public Class MyApp 
Inherits Application 



Comme vous le voyez, a ce niveau rien a dire. Dans la majorite des cas, vous 
n'aurez pas a ajouter du code dans cette partie. N'hesitez pas, toutefois, a 



End Class 
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changer le nom MyApp en un nom plus coherent. Faites-le egalement dans le 
fichier xaml et renommez aussi les fichiers. 



mention 

Proprietes de I'application 

Quand vous changez le nom du fichier MyApp, la propriete Action de generation 
du fichier devient Page. Vous devez remettre la valeur ApplicationDefinition. 
Pour y acceder, cliquez du bouton droit sur le nom du fichier et choisissez 
Proprietes. 



MyFirstApp.xaml Proprietes du fichier 

: jg__ _ 

Copier dans le repertoire d Ne pas copier 
Espace de noms de I'outil p 
Nom de fichier MyFirstApp.xaml 
Outil personnalise 



Action de generation 

Description de la relation entre le fichierj la generation et les 
processus de deploiement. 



M Figure 5-4 : 

Proprietes d'un fichier 



^uce 

^" Nom des classes 

Si le nom des classes differe entre le fichier XAML et le fichier xaml.vb, vous 
aurez immanquablement une erreur a la compilation. Les fichiers peuvent 
porter un autre nom que la classe mais il est de bon aloi de garder le meme 



JS 

nt 



Passons maintenant au fichier decrivant la fenetre de I'application. 

^arque 

Nom des classes et des fichiers 

Les classes et les fichiers ont ete renommes pour porter le nom He! loWorl 
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<Window x:Class="HelloWorld" 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xainl /presentation" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Title="Ma premiere application" 

> 

<Grid> 

</Grid> 

</Wi ndow> 

Comme vous pouvez le constater, Microsoft vous propose par defaut l'utilisa- 
tion d'une grille. Contrairement aux exemples vus jusqu'a present, la premiere 
balise est une balise Window et non plus une balise Page. La balise Window est 
utilisee pour definir une fenetre de type Windows. Nous reviendrons ulterieu- 
rement sur l'utilisation de la balise Page. 

Ajoutons le code suivant entre les balises Grid. 

<Label Vertical Al ignment="Center" 
Hori zontal Al i gnment="Center"> 

Bonjour le monde. 
</Label> 

Nous pouvons maintenant executer 1' application. Appuyez sur la touche (F5). 



■ Ma premiere application - |[D|fx"| 



■< Figure 5-5 : Ma 

* premiere application 

La balise Window dispose comme les autres balises d'un grand nombre 
d'attributs. Certains comme Width ou MinHeight ont deja ete vus dans d'autres 
chapitres et nous ne reviendrons pas dessus. En revanche, il existe quelques 
autres attributs fort interessants. 

Vous avez deja pu voir dans les exemples Taction de l'attribut Title, qui 
permet de definir le titre de la fenetre. 

Pour positionner la fenetre, vous disposez de l'attribut WindowsStartupLoca- 
tion, qui va determiner la position initiale de la fenetre. 

WindowStartupLocation="CenterScreen" 



Le guide du codeur • 135 



Creer une application 

v 



Les valeurs possibles sont CenterScreen pour centrer la fenetre dans l'ecran, 
ideal pour la fenetre principale ; CenterOwner pour centrer la fenetre dans la 
fenetre qui la contient, ideal pour les sous-fenetres ; et Manual pour vous 
permettre de choisir la position vous-meme. Cette derniere valeur est a utiliser 
en conjonction avec les attributs Top et Left. 

<Window x:Class="HelloWorld" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 
Title="Ma premiere application" 
WindowStartupLocation="Manual " 
Top="100" 
Left="300" 
> 



Un autre attribut interessant est l'attribut SizeToContent. S'il est fixe a True, la 
taille de la fenetre lors de la creation sera automatiquement adaptee au contenu. 

SizeToContent="WidthAndHeight" 



< Figure 5-6 : Utilisation de 



I Bonjour le monde. I 

SizeToContent 

II est possible de n'adapter la taille qu'en largeur en utilisant la valeur Width ou 
uniquement en hauteur en utilisant la valeur Height. 

Vous pouvez egalement opter pour demarrer automatiquement en mode maxi- 
mise ou minimise. 

WindowState="Maximized" 



II est egalement possible de modifier le comportement et les possibilites de 
redimensionnement des fenetres en utilisant l'attribut ResizeMode. 



ResizeMode="CanResizeWi thGrip" 



Figure 5-7 

Utilisation de 
ResizeMode 
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Notez le grip en bas a droite. 

Vous pouvez egalement opter pour interdire le redimensionnement avec la 
valeur NoResize. 

La taille de la fenetre n'est pas la seule chose que nous puissions modifier, il 
est egalement possible de modifier son affichage en ajoutant l'attribut WindowS- 
tyle. Par defaut, sa valeur est SingleBorderWindow, mais vous pouvez ajouter 
un effet 3D. 

WindowStyle="ThreeDBorderWindow" 



Bonjour le monde. 



A Figure 5-8 : 

Fenetre avec effet 3D 



Ou lui donner le look d'une fenetre d'outils. 
Wi ndowStyl e="Tool Wi ndow" 



Ma premiere dpplicat 




Figure 5-9 : 

Fenetre d'outils 



Ou encore afficher la fenetre sans aucun bord. 
WindowStyle="None" 



Bonjour le monde. 



Figure 5-10 : 

Fenetre sans bordure 
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Pour certaines fenetres, vous souhaiterez peut-etre qu'il ne soit pas possible de 
les recouvrir avec une autre. Si c'est le cas, utilisez l'attribut Topmost. 

Topmost="True" 

Par defaut, toutes les fenetres sont automatiquement reprises dans la barre des 
taches. Si, pour la fenetre principale, cette option par defaut est judicieuse, ce 
n'est pas toujours le cas pour les autres fenetres. Pour eviter qu'une fenetre ne 
soit reprise dans la barre des taches, il suffit d'utiliser l'attribut ShowInTaskbar. 

ShowInTaskbar="False" 



5.2 Gerer les evenements 

Pour illustrer l'utilisation des evenements, reprenons l'exemple precedent. Pour 
une simple question de facilite, dans ce nouvel exemple la grille est toutefois 
remplacee par un StackPanel. 

<Window x:Class="HelloWorld" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Ma premiere application" 
Wi ndowStartupLocati on="Manual " 
Top="100" 
Left="300" 
Name="HelloWorld" 
> 

<StackPanel Horizontal Al ignment="Center" 
Vertical Al ignment="Center"> 
<Label Name="lblTexte"> 

Bonjour le monde. 
</Label> 

<Button Name="btnRepondre"> 

Repondre 
</Button> 

</StackPanel> 
</Wi ndow> 



^ention ^^^^^^ ^^^^^^ 

X Centrage 

Les attributs realisant le centrage sont deplaces du Label au StackPanel . Sans 
cela, vu le type de fonctionnement du StackPanel, le centrage vertical dans 
fenetre n'aurait pas lieu. 



ns 
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Un bouton a egalement ete ajoute a la fenetre. 

La question est maintenant de savoir comment associer une action au bouton. 
Comme vous pouvez l'imaginer, Taction sera realisee dans le code .NET au 
sein d'une methode de la classe. Ceci etant entendu, le probleme se resume 
alors a associer le bouton a la methode voulue. Tout d'abord, il faut savoir que 
la methode doit etre associee non pas au bouton lui-meme mais a un evenement 
du bouton. En Toccurrence, Tevenement Click. 

Commengons par ecrire dans le code VB une methode que vous desirez 
executer. 

Public Sub CI ick_Repondre(ByVal sender As Object 
, ByVal e As RoutedEventArgs) 

Me. IblTexte. Content = "Merci" 

Me.btnRepondre.IsEnabled = False 

End Sub 

Cette methode va remplacer le texte "Bonjour le monde" par "Merci". 

La signature de la methode, c'est-a-dire les differents parametres, doit absolu- 
ment respecter la definition reprise dans Texemple. Elle correspond par ailleurs 
strictement a la definition des methodes chargees de repondre aux evenements 
dans Tenvironnement .NET. Le nom est quant a lui entierement libre, mais 
choisissez toujours un nom parlant. 

^ Utiliser I'lntelliSense 

Pour beneficier de I'lntelliSense et ainsi retrouver facilement les noms des I 
membres que vous aurez definis dans votre code XAML, n'hesitez pas a utiliser I 
le mot cle ME meme s'il est facultatif. M 

Maintenant que nous avons defini la methode, il ne reste plus qu'une simple 
etape a faire, realiser Tassociation entre Tevenement et la methode. Nous 
pourrions classiquement le faire en .NET mais il est plus judicieux de le faire 
dans le code XAML. 

<Button Name="btnSuite" Click="Click_Repondre"> 

Suite 
</Button> 

C'est aussi simple que cela. Le nom de Tattribut correspond au nom de 
Tevenement et la valeur est le nom de la methode a appeler. 
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■ Ma premiere application 


ENDS 


Bonjour le monde. 




Repondre 





< Figure 5-11 : 

Cliquer sur Repondre 



I Ma premiere application 



QUI® 




< Figure 5-1 2 : 

Repondre a ete clique 

La meme technique peut etre appliquee avec n'importe quel evenement de 
n'importe quelle classe. 



5.3 Heberger une application dans 
un browser 

Apercu de cette technologie 

II est possible de creer avec XAML des applications qui s'executent non pas 
dans une fenetre Windows mais dans un navigateur Internet. On parle alors de 
smart client. Ce type d' application est egalement appele Web Browser Appli- 
cation ou WBA. II s'agit d'une application online qui s'execute dans un 
browser et qui n'est pas installee localement. En resume, en accedant a une 
URL le programme est telecharge et execute sans qu'il ne soit installe. 
Contrairement a une application ASP.NET, le programme s'execute sur le poste 
client et non sur le serveur. II fait le lien avec les serveurs de donnees 
exactement comme le ferait une application Windows classique. 

Comme l'application s'execute sur le poste client, elle n'est plus soumise aux 
restrictions imposees par le HTML. Vous pouvez dans ce type d' application 
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tirer parti de toute la puissance des API WinFX ou presque, et ce y compris les 
fonctionnalites 3D. Toutefois, comme pour l'ASP.NET, le developpement se 
fait en mode Page. Contrairement a une application ASP.NET, les pages sont 
codees dans un meme module. Leur acces se fera alors sans devoir faire appel 
au serveur. 

En revanche, le fait que l'application soit executee sur le poste client rend 
necessaire la presence de WinFX sur le poste client. II ne s'agit done pas d'une 
technologie universelle independante de la plate-forme utilisee comme Test le 
HTML. 

La securite et les WBA 

L'application n'est pas installee sur votre PC mais est executee quand vous 
accedez a une adresse web depuis votre navigateur. Done, a priori, vous ne 
connaissez pas forcement l'application qui va s'executer. Ce qui pourrait 
entrainer de graves risques pour la securite de votre PC. 

Pour ces raisons, l'application est executee dans une Sandbox (aussi appele bac 
a sable) ; e'est-a-dire un environnement ou les privileges attribues a l'applica- 
tion sont reduits. Par defaut, l'application sera executee dans la zone Internet. 
De cette maniere, la securite de votre ordinateur est assuree au meme titre 
qu'avec une application web traditionnelle. 

Le fait d' executer l'application dans un environnement ferme a pour conse- 
quence que certaines fonctionnalites ne peuvent etre utilisees. Les droits 
attribues a la Sandbox peuvent etre etendus en modifiant la zone d' execution, 
comme vous pouvez le faire avec n'importe quel site. Par exemple, vous 
pouvez placer l'application dans la zone intranet au lieu de la zone Internet. De 
cette maniere, vous allez recuperer un certain nombre de fonctionnalites. 

Heberger et executer ce type d'application 

L'application est stockee sur un serveur web. En ce qui concerne IIS, vous 
devez disposer de la version 5 ou superieure. Le serveur ne doit pas necessai- 
rement contenir WinFX. En revanche, un minimum de configuration est 
necessaire. La configuration du serveur depasse largement le cadre de cet 
ouvrage mais, si vous etes interesse, vous pouvez trouver les informations 
necessaires sur le site de Microsoft. 

Sur le client, WinFX doit etre installe. Le browser doit etre Internet Explorer 6 
ou superieur ou n'importe quel browser qui implemente Microsoft WebBrowser 
Control. 

Vous pouvez egalement parfaitement executer des applications de ce type et qui 
sont presentes sur votre PC. 



Le guide du codeur • 141 



Creer une application 

v 



Quand recourir a ce modele d'application ? 

Par ses specificites, les WBA sont particulierement utiles pour les applications 
a contenu ou logique complexe pour lesquelles vous ne souhaitez pas installer 
un client local. La ou les deux clients doivent exister, le fait que le code puisse 
etre facilement transpose entre smart client et client riche est aussi un atout. II 
est clair qu'il sera plus aise d'utiliser ce type d'application dans un environ- 
nement intranet homogene. 



Creer une WBA 

Pour creer une WBA dans Visual Studio, vous devez creer un nouveau projet 
et choisir le type WinFX Web Browser Application, anciennement connue sous 
le nom d'Express Application. 



New Project 


Project types: 


lemplates: 


rag 



Office 

Smart Device 
Database 
Starter Kits 
Test 

-i Other Languages 
- Visual Basic 
Windows 
Windows (WinFX) 
Office 
: + Smart Device 
Database 
Starter Kits 
Test 

lie, 1*1 ~IJ 



Visual Studio installed templates 

™WinFX Windows Application 
™WinFX Service Library 



My Templates 

. j^Search Online Templates, . 



WinFX Web Browser Application 
~ WinFX Custom Control Library 



A project for creating an application with a WinFX user interface 
Name; Windows Applications 

Location: C:\Docurnent; arid Settmgs'stest :an"iMes do curnents'i Visual Studio fflB'iF'roiects 
■f.olution Nam-?: V'.'ir ^ Applications j 0 Create directory for solution 



Browse... | 



▲ Figure 5-13 : Creer une WBA 

Le contenu du projet est tres semblable au contenu pour une application 
Windows. 



I Explorateur de solutions ▼ -o X 


i 






13 






Jj] WebBrowser Application! 








My Project 






lj app.config 






- 


2J MyApp.xaml 








MyApp.xaml.vb 






... 


Pagel.xaml.vb 








g Readme.txt 






- 


_ : : WebBrowserApplicationl_Ternp 





< Figure 5-14 : Contenu d'une WBA 
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Vous y retrouvez les deux paires de fichiers mais, cette fois, au lieu de Windowl 
les fichiers se nomment Pagel . 

Voyons le contenu de ces quatre fichiers et les differences par rapport a ceux 
realises dans l'application Windows (voir p. 132). 

Si ce n'est l'adresse de l'URI, les fichiers MyApp.xaml et MyApp.xaml.vb sont 
identiques a ceux deja vus. 

Application x:Cl ass="MyApp" 
xmlns= 

"http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
StartupUri = " Pagel . xaml " 

> 

<Appl i cati on . Resources> 

</Appl i cation. Resources> 
</Appl ication> 

1 Interaction logic for MyApp.xaml 
Partial Public Class MyApp 
Inherits Application 



End Class 

En revanche, les fichiers Pagel.xaml et Pagel. xaml.vb heritent non plus d'un 
objet de classe Window mais bien d'un objet de la classe Page. 

<Page x:Class="Pagel" 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" 

> 

<Grid> 

</Grid> 

</Page> 

Imports System 

Imports System. Windows 

Imports System. Windows. Controls 

Imports System. Windows. Data 

Imports System. Windows. Documents 

Imports System. Windows. Media 

Imports System. Wi ndows .Medi a. Imagi ng 

Imports Sy stem . Wi ndows . Navi gati on 
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Imports System. Windows. Shapes 

1 Interaction logic for Pagel.xaml 
Partial Public Class Pagel 
Inherits Page 

Public Sub New() 

Initial izeComponent() 
End Sub 

End Class 



II n'y a en definitive pas de differences notables. 



0^^^Pour changer les noms des classes et des fichiers, vous devez utiliser 
Renvoi ' a technique decrite dans le paragraphe Creer une application 
Windows page 132. 

Maintenant, integrons le code utilise dans notre application Windows. 

<Page x:Cl ass="Pagel" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" 

> 

<StackPanel Horizontal Al ignment="Center" 
Vertical Al ignment="Center"> 
<Label Name="lblTexte"> 

Bonjour le monde. 
</Label> 

<Button Name="btnRepondre" Click="Click_Repondre"> 

Repondre 
</Button> 

</StackPanel> 
</Page> 



Imports System 

Imports System. Windows 

Imports System. Windows. Controls 

Imports System. Windows. Data 

Imports System. Windows. Documents 

Imports System. Windows. Media 

Imports System. Windows. Media. Imaging 

Imports System. Windows. Navigation 

Imports System. Windows. Shapes 

1 Interaction logic for Pagel.xaml 

Partial Public Class Pagel 
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Inherits Page 

Public Sub New() 

Initial izeComponentQ 
End Sub 

Public Sub CI ick_Repondre(ByVal sender As Object 
, ByVal e As RoutedEventArgs) 

Me. lblTexte. Content = "Merci" 

Me.btnRepondre.IsEnabled = False 
End Sub 

End Class 

Executez 1' application en utilisant par exemple la touche (Rp . 



M C:\Documents and SettingsUean Alain\Mes d... 


011s 


Fichier Edit View Atteindre Favoris ? 


>•,' 


i - o - ® s 6 


» 


j Adresse C:\Documents and 5ettings\Jean-Ala v H OK 


; Liens * 


: 




Bonjour le monde. 
Repondre 




St\ Zone inconnue 



■4 Figure 5-1 5 : 

Execution d'une WBA 



L' application est tres semblable a 1' application Windows mais elle est bien 
executee dans le navigateur. 

Si nous cliquons sur le bouton Repondre, l'application reagit comme prevu. 



M C:\Documents and SettingsUean Alain\Mes d... 


mils 


Fichier Edit View Atteindre Favoris ? 


>•> 


| Qprecedente - Q - g [jf] J 


j Adresse |^] C:\Documents and Settings\:)ean-Ala vj Q OK 


: Liens * 






Merci 




fi^j 2one inconnue 



< Figure 5-1 B : 

Evenement active 
dans la WBA 
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^uce 

^" Erreur de securite 

Si vous utilisez une version express de Visual Studio, vous recevrez peut-etre I 
une erreur de securite lors de la premiere execution. Fermez puis rouvrez votre I 
projet et I'erreur disparaltra d'elle-meme. M 

Si dans votre page vous ne devez pas utiliser de methode, vous pouvez opter 
pour une page XAML seule. II s'agit alors d'une page statique. Le code XAML 
sera directement execute lors du chargement de la page. 

Faites un copier-coller du code XAML dans NotePad. Supprimez l'attribut 
Class et l'attribut Click afin d'obtenir le code suivant : 

<Page 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" 

> 

<StackPanel Horizontal Al ignment="Center" 
Vertical Al ignment="Center"> 
<Label Name="lblTexte"> 

Bonjour le monde. 
</Label> 

<Button Name="btnRepondre"> 

Repondre 
</Button> 

</StackPanel> 
</Page> 

Sauvez le document et, depuis l'Explorateur Windows, double-cliquez dessus 
ou tapez son adresse dans Internet Explorer. La meme page est chargee mais, 
bien entendu, le bouton n'effectue plus aucune action. 

Comme il est possible de modifier la taille d'une fenetre Windows, il est 
egalement possible de modifier la taille de la page mais aussi de la fenetre du 
navigateur. Les attributs WindowWidth et WindowHeight permettent de controler 
la taille de la fenetre du navigateur alors que les attributs Width et Height 
controlent la taille de la page. Modifiez les valeurs de ces attributs dans 
l'exemple ci-dessous pour bien comprendre leur portee. 

<Page x:Cl ass="Pagel" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 
Title="Pagel" 
WindowTitle="Ma page" 
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WindowWidth="500" 
WindowHeight="300" 
Width="470" 
Height="200" 

> 

<Border BorderThickness="l" BorderBrush="Black"> 
<StackPanel HorizontalAl ignment="Center" 
Vertical Al ignment="Center"> 
<Label Name="lblTexte"> 

Bon jour le monde. 
</Label> 

<Button Name="btnRepondre" Click="Click_Repondre"> 

Repondre 
</Button> 
</StackPanel> 
</Border> 
</Page> 



^arque 

^* Titre de la fenetre 

Le titre de la fenetre est donne non pas par I'attribut Title de la balise Page 
mais bien par I'attribut WindowTitle. 

- 



9^ 



Enchamement des pages 

Pour naviguer entre les pages, WinFX met a notre disposition la classe 
NavigationService. Afin d'illustrer son utilisation, nous allons remplacer dans 
l'exemple precedent l'affichage du mot "merci" dans l'etiquette par l'affichage 
d'une page "Merci". 

Creons tout d'abord la nouvelle page a afficher. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Page2" 

> 

<StackPanel Horizontal Al ignment="Center" 
Vertical Al ignment="Center"> 
<Label Name="lblTexte"> 

Merci . 
</Label> 
</StackPanel> 
</Page> 
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La page etant entierement statique, il est inutile de creer une contre-partie VB. 
Evidemment, si votre seconde page est plus elaboree, rien n'empeche de creer 
une page complete avec du contenu XAML et .NET. 

Maintenant, voyons comment realiser l'appel de cette page depuis le code .NET 
de notre premiere page. 

Public Sub CI ick_Repondre(ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
Me.NavigationService.Navigate(New Uri ("Page2.xaml ", Uri Kind. Relative)) 
End Sub 

L'appel a la page se fait comme precedemment dans l'evenement CI ick associe 
au bouton en utilisant la methode Navigate de la propriete NavigationService. 
Cette methode recoit comme parametre une URI qui donne l'adresse de la page 
a afficher. L'URI peut etre absolue ou relative. 



m Ma page Microsoft Internet E... |- || □ ||>C 



Fichier Edit View Atteindre Favoris ** 

\ q , - - © • a a <i| " 

A*«» 3 C:\Documents am v OK Liens * 



Merci. 



Zone inconnue 



A Figure 5-17 : 

Navigation entre 
Daaes 



^ Barre de navigation d'lnternet Explorer 

Notez que la barre de navigation du navigateur ne permet pas de realiser les 
habituelles operations Precedente, Suivante. Vous devez pour oela utiliser la 
barre de navigation specifique. 



< Figure 5-18 : Barre de navigation 



Si vous ne souhaitez pas voir apparaitre la barre de navigation, il suffit 
d'assigner False a l'attribut ShowsNavigationUI de la balise Page. 
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<Page x:Class="Pagel" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" 
ShowsNavigationUI="Fal se" 

> 



IM Ma page Microsoft internet E... 0111® 



Fichier Edit View Atteindre Favoris >J $p 

j Q Preceded " O ' 1*1 iH 

: Adresse 2 C:\Documents an S OK l*n» * 



Mera. 



Figure 5-19 : Sans 
barre de navigation 



NavigationService dispose egalement des methodes GoBack et GoForward pour 
provoquer un passage a la page precedence ou a la page suivante. Les methodes 
CanGoBack et CanGoForward vous informent sur la possibilite ou non d'appeler 
les methodes respectives. 



5.4 Les pages fonctions 

Les pages fonctions sont un type de page particulier. Ce type de page est appele 
depuis une autre page et peut recevoir des parametres. II dispose d'une methode 
OnReturn qui provoque le retour dans la page appelante et qui, de plus, permet 
de renvoyer une valeur. II n'est pas necessaire de connaitre la page appelante. 
Pour recuperer la valeur en retour, il faudra utiliser la gestion des evenements. 

Nous aurons besoin de cette petite classe utilitaire developpee pour l'exemple 
ci-apres. 

Public Class Data 

Public Val As Integer 

Public Texte As String 
End Class 
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II n'y a pas grand-chose a dire sur cette classe. Elle servira pour le transfert de 
donnees entre les pages. 

La premiere page qui est automatiquement chargee lors du demarrage de 
l'application est une page classique qui herite de Page. 

<Page x:Cl ass="Pagel" xtnlns= 
"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" 

> 

<StackPanel> 

<Label Name="valeur"/> 
<Label Name="texte"/> 

<Button Name="btnPageSuiv" Click="PageSuivante"> 

Page suivante 
</Button> 
</StackPanel> 

</Page> 

Dans le fichier Pagehxaml, deux Label sont definies mais sont vierges. Elles 
serviront a afficher les valeurs recues. Le bouton sert a demander la navigation 
vers la page suivante. L'appel se fera dans la methode PageSui vante. 

Partial Public Class Pagel 
Inherits Page 

Dans le code .NET associe, nous declarons un membre du type de la page qui 
sera appele. II est important de declarer que la page se mettra a l'ecoute des 
evenements, ce qui est realise avec WithEvents. 

Private WithEvents pageSuiv As Page2 

Public Sub New() 

Initial izeComponentQ 
End Sub 

Sub PageSui vante (ByVal sender As Object, ByVal e As RoutedEventArgs) 

La transmission des parametres a la page se fait par le constructeur. L'appel de 
la page elle-meme se fait exactement comme une page normale. 

pageSuiv = New Page2("defaut") 
Me. NavigationService. Navigate (pageSuiv) 
End Sub 

II faut definir la methode qui sera appelee lors du retour. Pour qu'elle soit 
effectivement appelee, il faut l'associer a l'evenement avec Handles. Notez que 
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le type de la valeur recue est precise. 

Private Sub return_handler( 
ByVal sender As Object, 
ByVal e As ReturnEventArgs(Of Data)) 
Handles pageSui v. Return 

Les valeurs recues sont placees dans les controles Label et le bouton est 
desactive. 

valeur. Content = e.Result.Texte 
texte. Content = e. Result. Val 
btnPageSuiv.IsEnabled = False 
End Sub 
End Class 

Nous devons maintenant definir la page 2, qui sera une PageFunction. Notez la 
definition du type de parametre et la presence de la declaration du namespace 
de l'application. Le namespace etant dans l'assembly du programme, il n'est 
pas necessaire de preciser l'assembly. La TextBox recevra la valeur recue en 
parametre, qui pourra ainsi etre modifiee. La methode associee a l'evenement 
CI ick du bouton aura pour effet de fermer la page. 

<Page Fund ion x:Cl ass="Page2" x:TypeArguments="app:Data" 
xmlns= 

" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
xmlns:app="cl r-namespace:WinFxBrowserAppl icationl" 
Title="Page2" 

> 

<StackPanel> 

<TextBox Name="texte"/> 
<Button Click="Fin"> 

Fin 
</Button> 
</StackPanel> 
</PageFunction> 

Meme dans le code .NET, des la declaration de la page, il faut decrire les 
parametres recus. 

Partial Public Class Page2 

Inherits PageFunction(Of Data) 

Private donnee As New Data 

Le constructeur re9oit le parametre. 

Public Sub New (ByVal initVal As String) 
Initial izeComponentQ 
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donnee.Texte = initVal 
donnee.Val = 100 
texte.Text = initVal 
End Sub 



Pour fermer la fenetre et revenir a la page appelee, on utilise OnReturn, qui doit 
imperativement retourner un objet de type ReturnEventArgs qui est un type 
generique. 

Sub Fin(ByVal sender As Object, ByVal e As RoutedEventArgs) 
donnee.Texte = texte.Text 

Dim retour As New ReturnEventArgs (Of Data) (donnee) 
OnReturn ((retour) 
End Sub 



End Class 



Lors du demarrage de 1' application, nous recevons la premiere page. 



M WinFxBrowserApplicationl xbap - ... |_J|nJ|Xj 




Page suivante 



< Figure 5-20 : La 

page 1 



Apres avoir clique sur le bouton, la deuxieme page est affichee. Et nous 
pouvons changer la valeur dans la boite de texte. 



I WinFxBrowserApplicationl .xbap - ... 



Fichier Edit View Atteindre Favoris ? 

Q Precedente - © * Q 3 {5 



Aji'/:-o:- T) rowserApplicationl.xbap v QoK Liens 



je suis passe par la PagHFuncdon 



m 



< Figure 5-21 : La 

page 2 
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Apres avoir clique sur le bouton de fin, la premiere page est a nouveau affichee. 



IS WinFxBrowserApplicationl.xbap - 



Fichier Edit View Atteindre Favoris ? 

Q Precedence - Q \x\ ^ $ 
Adresse rowser Application 1 .xbap v OK 

je suis passe par la PageFuncbon 
IOC 

Page suivante 



Zone inconnue 



II est egalement possible d'utiliser cette technique dans un Frame. Vous pouvez 
par exemple realiser une fenetre complete avec un menu et divers elements qui 
doivent perdurer tout au long de la navigation et utiliser le Frame comme zone 
d'affichage des differents contenus. En somme, il s'agit d'un genre de page 
maitre. 

Pour illustrer cela, imaginons que notre page de demarrage est la page 
StartPage decrite ci-dessous. 

<Page x:Class="StartPage" xmlns= 
"http : //schemas .mi crosoft.com/wi nfx/2006/xaml /presentati on" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="StartPage" 

> 

<DockPanel VerticalAl ignment="Top"> 
<Image DockPanel .Dock="Top" 

Source="c : \photo.jpg" Mi nWi dth="300"> 
</Image> 

<Menu DockPanel .Dock="Top" Height="30"> 
<MenuItem Header="Page 1" 
Click="GoToPagel"/> 
<MenuItem Header="Page 2" 

Click="GoToPage2"/> 
<MenuItem Header="Page 3" 
Click="GoToPage3"/> 
</Menu> 

<StatusBar DockPanel .Dock="Bottom" 
Background="LightBlue"> 
<Label> 

Micro Application 
</Label> 



^ Figure 5-22 : La 

Daae 1 modifiee 
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</StatusBar> 

<Frame Name="zoneContenu" 
Source="HomePage.xaml " MinHeight="150"/> 
</DockPanel> 
</Page> 



II s'agit d'une page classique dont le menu servira a naviguer et contenant un 
Frame qui recoit HomePage.xaml, dont le contenu est en definitive la page 
d'accueil. 



Partial Public Class StartPage 
Inherits Page 

Public Sub New() 

Initial izeComponentQ 
End Sub 



Sub GotoPagel(ByVal sender As Object, ByVal e As RoutedEventArgs) 

Dim nvPage As New Pagel 

zoneContenu . Navi gate (nvPage) 
End Sub 

Sub GotoPage2(ByVal sender As Object, ByVal e As RoutedEventArgs) 

Dim nvPage As New Page2 

zoneContenu . Navi gate (nvPage) 
End Sub 

Sub GotoPage3 (ByVal sender As Object, ByVal e As RoutedEventArgs) 

Dim nvPage As New Page3 

zoneContenu . Navi gate (nvPage) 
End Sub 
End Class 



Si nous examinons le code .NET de la page, nous pouvons constater qu'a 
chaque action du menu une nouvelle page est affichee en provoquant la 
navigation dans le Frame uniquement. Notre page maitre reste done bel et bien 
toujours affichee. 



^arque 

Of Ecoute des evenements 

Contrairement a I'exemple precedent, le programme appelant ne se met pas 
I'ecoute de la valeur de retour car, dans cet exemple, elle ne nous interesse 
pas. Rien n'empeche de la faire si tel est le besoin. 



5e 



La page d'accueil HomePage.xaml est egalement une page tout a fait classique. 
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<Page x:Class="HomePage" xmlns= 
"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 

> 

<StackPanel> 
<Label> 

Ceci est la page principale 
</Label> 
</StackPanel> 
</Page> 

Examinons maintenant la classe Pagel. Page2 et Page3 sont construites sur le 
meme modele. 



<PageFunction x:Cl ass="Pagel" xmlns= 
"http : //schemas .mi crosoft.com/wi nfx/2006/xaml /presentati on" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
xml ns : sys= "cl r-namespace : System;assembl y=mscorl i b" 
x:TypeArguments="sys: String" 
> 

<StackPanel> 
<Label> 

Ceci est la page 1 
</Label> 

<Button Click="Retour"> 

Retour 
</Button> 
</StackPanel> 
</PageFunction> 



Pagel est une page de type PageFunction construite de la meme maniere 



^arque 

^* Reference au namespace System 



Notez la presence d'une reference au namespace System et a I'assembly 
mscorlib pour pouvoir definir le type String comme argument. 



■fi 



Partial Public Class Pagel 

Inherits PageFunction (Of String) 

Public Sub New() 

Initial izeComponentQ 
End Sub 



Sub Retour(ByVal sender As Object, ByVal e As RoutedEventArgs) 
Dim retour As New ReturnEventArgs(Of String) ("De Pagel") 
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OnReturn (retour) 
End Sub 
End Class 

Le code .NET est egalement extremement simple. La seule chose a noter est la 
presence de OnReturn, dont nous avons vu precedemment le fonctionnement. 

Lors du lancement du programme, la page d'accueil est affichee. 



Ba WinFxBrowserApplication2.xbap ... 



Fichier Edit View Atteindre Favoris ? 

Q Precedence • Q • [jy [g] |g) 



■ '■■r : v C:\Document5 and Setting v Q OK Liens 



Page 1 Page 2 Page 3 
Ceci est la page principale 



Micro Application 



1 



Zone inconnue 



< Figure 5-23 

Page d'accueil 



Si dans le menu vous choisissez Menul, la page 1 est a son tour affichee mais 
dans le Frame, laissant tout le contexte inchange. 



I WinFxBrowserApplication2.xbap - ... (T][nJfxJ 



Fichier Edit View Atteindre Favoris ? 

Q Precedence • Q - g| g| 
Adresse fe| C:\Documents and Setting v £j OK Liens » 



Page 1 Page 2 Page 3 
Ceci est la page 1 



Micro Application 



Zone inconnue 



< Figure 5-24 

Page 1 
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Si vous cliquez sur Retour, la page d'accueil est a nouveau affichee. 

> Particularity de navigation 

Si au lieu de cliquer sur Retour vous demandez une autre page dans le menu, 
par exemple pour demander la page 3, celle-ci s'affiche sans probleme mais, 
dans le cas ou vous cliquez a ce moment sur Retour, c'est non pas la page 
d'accueil qui est affichee mais bien la page 1 , page qui est en realite a la base 
de I'appel de la PageFunction. 



Si vous souhaitez que la page d'accueil soit systematiquement reaffichee, il 
vous suffit de vous mettre a l'ecoute de la valeur de retour, comme nous l'avons 
fait dans le premier exemple ; et, dans la methode qui traite le retour, vous 
pouvez imposer d'afficher la page d'accueil dans le Frame. 

Cette facon de travailler apporte enormement de souplesse. Rien ne vous 
empeche par exemple de travailler avec plusieurs Frame. Finalement, le modele 
en page peut facilement suivre un comportement semblable aux applications 
Windows classiques. N'oubliez toutefois pas que l'utilisateur peut egalement 
utiliser la barre de navigation. 



5.5 Creer une application Windows 
navigable 

II existe un troisieme modele d' application qui est un hybride entre les deux 
technologies vues ci-dessus. II s'agit d'une application Windows classique dans 
le sens ou elle est lancee depuis le PC client, s'execute directement dans une 
fenetre Windows et n'est done pas soumise aux contraintes securitaires propres 
aux WBA. En revanche, il s'agit d'un modele applicatif par navigation entre 
des pages exactement comme les WBA. 

Ce modele est parfait si vous desirez executer une application a la fois dans un 
browser et nativement dans Windows. Avec un minimum de modifications, une 
application WBA devient une application Windows navigable. 

Voyons comment faire. Tout d'abord, vous devez creer une nouvelle application 
WinFX. Ensuite, importez dans ce projet les pages de votre application WBA. 

Si nous reprenons les pages realisees dans l'exemple du chapitre precedent, 
nous devons done avoir quatre fichiers XAML : MyApp, Windowl , Pagel et 
Page2. 

II ne nous reste maintenant plus qu'une seule chose a faire, remplacer le 
contenu de Windowl. xaml par le code suivant : 
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<Navi gat i onWi ndow x : CI ass="Wi ndowl " 
xmlns= 

" http : // schemas . mi crosof t . com/wi nf x/2006 /xaral /presentat i on " 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xainl " 
Title="Ma premiere application Windows en mode page" 
Source="Pagel.xaml " 

/> 



I Ma premiere application navigable 




< Figure 5-25 : 

Application navigable 
premiere page 



I Ma premiere application navigable 




< Figure 5-2B : 

Application navigable 
deuxieme page 



mention 

Windowl .xaml.vb 

Dans I'exemple, ce fichier est inutile et peut etre efface. Si vous desirez le 
conserver, vous devrez modifier I'heritage de la classe pour y faire apparaitre 
NavigationWindow en lieu et place de Window. 



L'utilisation d'une application WBA en tant qu' application Windows client 
n'est pas la seule utilite de NavigationWindow. Cette facon de travailler est aussi 
tres utile pour realiser un assistant Wizard, par exemple. II s'agit non plus alors 
d'une application complete faite sur ce modele mais uniquement d'une partie 
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de celle-ci. Le reste de 1' application etant classiquement compose de fenetres de 
type Window simple. 

Voici un exemple extremement simplified Tout d'abord, la fenetre classique, qui 
fait appel a l'assistant via un bouton, mais cela peut tout aussi bien etre un 
menu. 

<Window x:Class="ClassicWindow" 
xmlns= 

"http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 

> 

<StackPanel Horizontal Al ignment="Center" Vertical Al ignment="Center"> 
<Label Name="lblTexte"> 

Fenetre classique. 
</Label> 

<Button Name="btnWizard" CI ick="Wizard"> 

Wizard 
</Button> 

</StackPanel> 
</Wi ndow> 

Imports System 

Imports System. Windows 

Imports System. Windows. Controls 

Imports System. Windows. Data 

Imports System. Windows. Documents 

Imports System. Windows. Media 

Imports System. Wi ndows .Medi a . Imagi ng 

Imports System. Windows. Shapes 

1 Interaction logic for Windowl.xaml 
Partial Public Class HelloWorld 
Inherits Window 

Public Sub New() 

Initial izeComponent() 
End Sub 

Public Sub Wizard(ByVal sender As Object, ByVal e As RoutedEventArgs) 

Dim wiz As New Windowl 

wiz.ShowDialog() 
End Sub 
End Class 

La methode Wizard qui est associee a l'evenement CI ick du bouton instancie et 
affiche une fenetre de type Windowl. Comme vous pouvez le constater dans ce 
qui suit, Windowl est une fenetre de type NavigationWindow. 
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<Navi gat i onWi ndow x : CI ass="Wi ndowl " 
xmlns= 

" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Title="Mon premier wizard" 
Source="Pagel.xaml " 
Width="280" 
Height="160" 
/> 

Pagel est automatiquement charge dans la fenetre navigable. 

<Page x:Cl ass="Pagel" 
xmlns= 

" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xmlns:x=" http: //schemas. mi crosoft.com/winfx/2006/xaml " 
Title="Pagel" 

> 

<StackPanel> 

<RadioButton Name="radA" MaxWidth="50" 
Margin="5,5,5,5"> 
A. 

</RadioButton> 

<RadioButton Name="radB" MaxWidth="50" 
Margin="5,5,5,5"> 
B. 

</RadioButton> 

<WrapPanel Horizontal Al ignment="Center"> 
<Button Width="80" Margin="5,5,5,5" 
Click="Prec" > 

Retour 
</Button> 

<Button Width="80" Margin="5,5,5,5" 
Click="Suiv" > 

Suivant 
</Button> 
</WrapPanel> 
</StackPanel> 
</Page> 

Imports System 
Imports System. Windows 
Imports System. Windows. Controls 
Imports System. Windows. Data 
Imports System. Windows. Documents 
Imports System. Windows. Media 
Imports System. Windows. Media. Imaging 
Imports System. Wi ndows . Navi gati on 
Imports System. Windows. Shapes 
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1 Interaction logic for Pagel.xaml 
Partial Public Class Pagel 
Inherits Page 

Public Sub New() 

Initial izeComponent() 
End Sub 

Public Sub Prec (ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
Me.NavigationService.GoBack() 
End Sub 

Public Sub Suiv(ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
If Me.radA.IsChecked Then 

Me . Navi gat i onServi ce . Navi gate ( 
New Uri ("PagelA.xaml", Uri Kind. Relative)) 

Else 

Me. Navi gat ionService. Navi gate ( 
New Uri ("PagelB.xaml", UriKind. Relative)) 
End If 
End Sub 

End Class 
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Ma premiere application navigable 
Ob. 

-.e:DLr 




■< Figure 5-27 : 

Premiere page du 
Wizard 



Notez que le bouton Retour declenche la methode GoBack de la fenetre de 
navigation tout comme si vous aviez appuye sur la fleche [Retour Arriere) . 

Si nous choisissons l'option A, la methode nous fait naviguer vers la page 
PagelA.xaml. 

<Page x:Class="PagelA" 
xmlns= 

"http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="PagelA" 

> 

<StackPanel> 
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<RadioButton Name="radl" MaxWidth="50" 
Margin="5,5 > 5,5"> 
1. 

</RadioButton> 

<RadioButton Name="rad2" MaxWidth="50" 
Margin="5,5,5,5"> 
2. 

</RadioButton> 

<WrapPanel Horizontal Al ignment="Center"> 
<Button Width="80" Margin="5,5,5,5" 
Click="Prec"> 

Retour 
</Button> 

<Button Width="80" Margin="5,5,5,5" 
CI ick="Sui v"> 

Suivant 
</Button> 
</WrapPanel> 
</StackPanel> 
</Page> 

Imports System 
Imports System. Windows 
Imports System. Windows. Controls 
Imports System. Windows. Data 
Imports System. Windows. Documents 
Imports System. Windows. Media 
Imports System. Windows. Media. Imaging 
Imports System. Wi ndows . Navi gati on 
Imports System. Windows. Shapes 

Partial Public Class PagelA 
Inherits Page 

Public Sub New() 

Initial izeComponentQ 
End Sub 

Public Sub Prec(ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
Me. Navi gati onService.GoBack() 
End Sub 

Public Sub Suiv(ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
If Me.radl.IsChecked Then 

Me . Navi gat i onServi ce . Navi gate ( 
New Uri ("PagelAl.xaml", Uri Kind. Relative)) 

Else 

Me . Navi gat i onServi ce . Navi gate( 
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New Un("PagelA2.xaml", Uri Kind. Relative) 
End If 
End Sub 



End Class 
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< Figure 5-28 : 

□euxieme page du 
Wizard 

Cette fois, le choix 2 nous conduit vers une derniere page. 

<Page x:Class="PagelA2" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="PagelA2" 

> 

<StackPanel> 

<Label Horizontal ContentAl ignment="Center"> 

Le choix est temine. 
</Label> 

<WrapPanel HorizontalAl ignment="Center"> 
<Button Width="80" Margin="5,5,5,5" 
Click="Prec"> 

Retour 
</Button> 

<Button Width="80" Margin="5,5,5,5" 
CI ick="Terminer"> 

Termi ner 
</Button> 
</WrapPanel> 
</StackPanel> 
</Page> 

Imports System 

Imports System. Windows 

Imports System. Windows. Controls 

Imports System. Windows. Data 

Imports System. Windows. Documents 

Imports System. Windows. Media 

Imports System. Wi ndows .Medi a. Imagi ng 

Imports Sy stem . Wi ndows . Navi gati on 

Imports System. Windows. Shapes 
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' Interaction logic for Pagel.xaml 
Partial Public Class PagelA2 
Inherits Page 

Public Sub New() 

Initial izeComponentQ 
End Sub 

Public Sub Prec(ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
Me.NavigationService.GoBackQ 
End Sub 

Public Sub Terminer(ByVal sender As Object 
, ByVal e As RoutedEventArgs) 
DirectCast(Me. Parent, NavigationWindow) .CloseQ 

End Sub 

End Class 
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Ma premiere application navigable 

Le choix est temine. 

< Figure 5-29 : 

Troisieme page du 
Wizard 

Pour fermer la fenetre, il est necessaire de convertir la propriete Parent en une 
NavigationWindow que nous savons qu'elle est. 

Si nous demandons le retour en arriere, les fleches avant et arriere deviennent 
accessibles. 
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< Figure 5-30 : 

Retour a la deuxieme 
page du Wizard 
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Boutons de navigation 

La fenetre ne rend accessibles les boutons de navigation que si la navigation 
dans ce sens est possible. Vous pouvez egalement connaltre cette information 
en utilisant les proprietes CanGoBack et CanGoForward. 



□n 
□n 



5.6 Les applications avec WPF/E 

WPF/E, abreviation pour Windows Presentation Fundation for Everywhere, a 
pour but comme son nom l'indique de pouvoir executer des applications WPF 
sur toutes les plates-formes. Les informations disponibles sur ce sujet sont 
encore tres fragmentaires. Toutefois, on peut d'ores et deja dire que ces 
applications vont generalement etre executees dans un browser. Toutefois, il ne 
faut pas confondre application WBA et application WPF/E. En effet, en dehors 
des contraintes de securite, les WBA disposent de toute la puissance de WPF 
alors que WPF/E ne sera qu'un sous-ensemble de WPF. Alors, pourquoi 
WPF/E ? WPF/E pourra s'executer sur des plates-formes ou WPF n'est pas 
installe. En fait, WPF/E, a l'instar de Flash, sera installe sur le poste client 
comme un Add-in du browser. Cet Add-in ne devrait pas peser plus de deux 
mega-octets. C'est pourquoi une partie du potentiel de WPF doit etre ampute. 
Si, actuellement, il n'est pas encore possible de savoir exactement ce qui sera 
exactement inclus, il est en revanche deja acquis que la 3D ne sera pas presente. 
En ce qui concerne la syntaxe XAML, pas de soucis, elle est identique mais 
bien sur limitee aux fonctionnalites presentes. 

WPF/E sera disponible pour Internet Explorer, Mozilla, Firefox, Opera et 
Safari. Au niveau du systeme d' exploitation, Windows (a partir de 2000) sera 
bien sur supporte ainsi que Mac OS X 10. Pour Linux et Solaris, l'espoir 
demeure mais sans aucune certitude. II en est de meme pour les anciennes 
versions de Windows (Windows 95, 98 et Me). Des versions pour les PC de 
poche et autres telephones portables utilisant les systemes Windows sont 
egalement prevues. 

Normalement, une premiere preversion doit voir le jour dans le courant du 
troisieme trimestre 2006 alors que la version definitive est attendue pour le 
premier semestre 2006. En ce qui concerne les unites legeres, il faudra attendre 
le second semestre 2007. 
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Architecture de WPF/E 

Navigateur Web 




▲ Figure 5-31 : Architecture de WPF/E 



Comme vous pouvez le constater, XAML pourra interagir avec le JavaScript 
mais egalement executer du code intermediate (compile) .NET. Ce dernier 
pourra etre execute directement par l'Add-in. Le code XAML pourra etre 
integre a la page HTML ou utilise comme une ressource externe. 

Voici tout d'abord comment devrait se presenter une page avec une application 
WPF/E en ressource externe. 

<html> 
<body> 

<object id="wpfehost" size="..."> 

<param name=" source" value="monAppliction.wpfe"/> 

</body> 
</html> 

L' application WPF/E contiendra le XAML compresse (baml) mais aussi le code 
IL (.NET compile) et les ressources (images, media...). 

Maintenant, voyons comment devrait se presenter une application WPF/E 
integree a la page HTML. 

<html> 
<head> 
<!-Script XAML— > 

<script id="monScHptXaml " type="text/xaml "> 
<? Xml version="1.0" ?> 
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<Canvas 

xml ns=" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on" 
xml ns :x="http : //schemas .mi crosoft . com/wi nfx/2006/xaml "> 

</Canvas> 
</script> 
</head> 
<body> 

<object id="wpfe" cl assi d=" . . . " 
codebase= "xcpctrl . cabfvers i on=0 , 0 , 3 , 0" 
height="300" width="400"> 

<param name="SourceElement" value="monScriptXaml "/> 
<param name="WindowslessMode" value="True"/> 
<param name="BackgroundColor val ue="#00000000"/> 
</object> 

</body> 
</html> 

Comme vous l'avez vu dans le diagramme d' architecture, vous pouvez 
manipuler des objets WPF/E depuis le code JavaScript. Voici en quelques lignes 
comment faire. 

<script type="text/javascript"> 
void Fuction maFonction() 
{ 

var wpfeObject = document. getElementBy Id ("wpfe") ; 

var Ctrl = wpfeObject. FindName("LeNomDeMonControleDansXAML") ; 

Ctrl .SetValue("NomDeLaPropriete", valeur) ; 

} 

</script> 

Vous pouvez par ce moyen creer des pages qui utilisent a la fois le HTML, le 
JavaScript et WPF/E au travers de XAML et si necessaire de code .NET. Ces 
technologies peuvent non seulement cohabiter mais egalement interagir. 

5.7 Checklist 

Dans ce chapitre essentiellement dirige sur la gestion d'une application, nous 
avons vu : 

■ comment est composee une application Windows et comment la realiser ; 

■ comment realiser une application a laquelle on accedera depuis un 
navigateur web (application WBA) ; 

■ comment utiliser PageFunction ; 



Le guide du codeur • 167 



Creer une application 



■ comment realiser une page maitre pour naviguer dans 1' application ; 

■ comment gerer la securite pour les applications WBA ; 

■ comment transformer simplement une application WBA en application 
Windows ; 

■ comment realiser un assistant (Wizard) ; 

■ comment gerer les evenements dans XAML ; 

■ les bases du futur modele d' application WPF/E. 
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Creer une barre d'outils 183 

Checklist 189 



Les menus 

v 



6.1 Creer un menu 
Le menu principal 

Traditionnellement, le menu principal se presente horizontalement en haut de 
fenetre sur un fond gris clair. Pour creer notre menu, nous allons utiliser les 
classes Menu et Menultem. La propriete VerticalAl ignment va nous permettre de 
placer le menu sous la barre de titre comme souhaite. 

<Window x:Cl ass="AvalonMenu.Windowl" 
xmlns= 

"http://schemas .mi crosoft.com/wi nfx/2006/xaml /presentati on" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Title="Les menus avec Avalon"> 
<Menu VerticalAl ignment="Top" Height="20"> 
<MenuItem Header="Fichier"/> 
<MenuItem Header="Edition"/> 
<MenuItem Header="Aide"/> 
</Menu> 
</Wi ndow> 



▼ Hauteur du menu 

La propriete Height est obligatoire sinon le menu occupera toute la hauteur 
disponible dans notre fenetre. 



ui^ 



l Les menus avec XAML 




< Figure 6-1 : Le 

menu principal 

Dans l'exemple precedent, la fenetre principale ne pourra contenir que le menu. 
C'est toutefois le cas de beaucoup d' applications et essentiellement des 
applications MDI. Si tel n'est pas votre objectif, la solution est simple et deja 
connue. II nous suffit de placer le menu dans un conteneur tel qu'une grille, un 
StackPanel ou encore un DockPanel. 
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<Wi ndow 
xmlns= 

"http : //schemas .mi crosof t . com/wi nf x/2006/xaml / presentati on" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Les menus avec XAML" 

> 

<DockPanel> 

<Menu Vertical Al ignment="Top" Height="20" 
DockPanel .Dock="Top"> 
<MenuItem Header="Fichier"/> 
<MenuItem Header="Edition"/> 
<MenuItem Header="Aide"/> 
</Menu> 
</DockPanel> 
</Wi ndow> 

Le resultat sera identique, a la difference pres qu'il est maintenant possible de 
placer d'autres controles ou d'autres conteneurs dans la fenetre. 

Les sous-menus 

Pour creer un sous-menu, un menu vertical, il suffit de definir un ou des 
Menultem dans le nceud Menultem du menu principal. Chaque nouveau Menultem 
peut a son tour contenir d'autres Menultem fils. 

<Wi ndow 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Les menus avec XAML" 

> 

<DockPanel> 

<Menu Vertical Al ignment="Top" Height="20" 
DockPanel .Dock="Top"> 
<MenuItem Header="Fichier"> 
<MenuItem Header="0uvrir"/> 
<MenuItem Header="Fermer"/> 
</MenuItem> 

<MenuItem Header="Edition"> 
<MenuItem Header="Copier"/> 
<MenuItem Header="Coller"/> 
<Separator /> 
<MenuItem Header="Livre"> 

<MenuItem Header="Precedent"/> 
<MenuItem Header="Suivant"/> 
</MenuItem> 
</MenuItem> 

<MenuItem Header="Aide"/> 
</Menu> 
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</DockPanel> 
</Wi ndow> 



I Les menus avec XAML 



fichier |? J Aide 



Zcz er 
lei 



Precedent 
Suivant 



□1® 



A Figure 6-2 : Les 

sous-menus 



^arque 

Or Placer des separations dans le menu 

Notez I'utilisation de la balise Separator pour creer un separateur. 



J 



Rend re un element du menu inactif 

Pour rendre un element d'un menu inactif (grise), vous devez assigner la valeur 
False a l'attribut IsEnabled. 

<MenuItem Header="Fichier"> 

<MenuItem Header="Ouvrir"/> 

<MenuItem Header="Fermer" IsEnabled="False"/> 
</MenuItem> 



I Les menus avec XAML 



| Edition Aide 

Ouvrir 

Fermer 



A Figure 6-3 : Les 

sous-menus 
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Cocher un element du menu 

Pour cocher un element d'un menu, utilisez la propriete IsChecked. Si elle est 
True, l'element du menu correspondant sera coche. 

<MenuItem Header="Aide"> 

<MenuItem Header="En ligne" IsChecked="True"/> 
</MenuItem> 



1 Les menus avec XAML 



Rchier Edition 



QUI® 



v En tigne 



Figure 6-4 : Les 

I sous-menus 

Associer une action a un menu 

Pour associer une methode au clic sur un element du menu, il suffit d'assigner 
le nom de la methode a l'attribut CI ick de l'element correspondant. Reprenons 
l'exemple precedent complet et adaptons-le pour rendre le menu Fermer 
disponible quand on clique sur Ouvrir et rendre en revanche ce dernier 
indisponible. Nous ferons l'inverse avec Fermer. Dans le meme ordre d'idee, 
nous supprimerons ou activerons la coche lors du clic sur le menu en ligne. 



^ention ^^^^^^^^^^^^^^^^^^^^^ 

X Realiser soi-meme l'exemple 

Si vous souhaitez reproduire cet exemple, vous devrez creer un projet dans 
Visual Studio. 



ns^ 



Le code XAML devient : 



<Window x:Class="Windowl" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Les menus avec XAML" 

> 

<DockPanel> 
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<Menu Vertical Al ignment="Top" Height="20" 
DockPanel .Dock="Top"> 
<MenuItem Header="Fichier"> 

<MenuItem Name="mnuOuvrir" Header="Ouvri r" 

CI nck="Click_0uvrir"/> 
<MenuItem Name="mnuFermer" Header="Fermer" 
I sEnabl ed=" Fal se" CI i ck="Cl i ck_Fermer"/> 
</MenuItem> 

<MenuItem Header="Edition"> 
<MenuItem Header="Copier"/> 
<MenuItem Header="Coller"/> 
<Separator /> 
<MenuItem Header="Livre"> 

<MenuItem Header="Precedent"/> 
<MenuItem Header="Suivant"/> 
</MenuItem> 
</MenuItem> 

<MenuItem Header="Aide"> 

<MenuItem Name="mnuEnLigne" Header="En ligne" 
IsChecked="True" CI ick="Cl ick_EnLigne"/> 
</MenuItem> 
</Menu> 
</DockPanel> 
</Wi ndow> 



^arque 

^* Importance des noms 

Jusqu'a maintenant, dans les menus, je n'avais pas pris la peine de donner des 
noms. Comme vous pouvez le constater, cela se revele rapidement necessaire 



es 

y 



Les methodes qui seront appelees lors des evenements Click respectifs sont 
definies dans le code VB.NET associe. 



Imports System 

Imports System. Windows 

Imports System. Windows. Controls 

Imports System. Windows. Data 

Imports System. Windows. Documents 

Imports System. Windows. Media 

Imports System. Wi ndows . Medi a . Imagi ng 

Imports System. Windows. Shapes 

1 Interaction logic for Windowl.xaml 
Partial Public Class Windowl 
Inherits Window 
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Public Sub New() 

Initial izeComponent() 
End Sub 

Public Sub CI ick_Ouvrir(ByVal sender As Object 
, ByVal e As RoutedEventArgs) 

Me.mnuFermer.IsEnabled = True 

Me.mnuOuvrir.IsEnabled = False 
End Sub 

Public Sub CI ick_Fermer(ByVal sender As Object 
, ByVal e As RoutedEventArgs) 

Me.mnuFermer.IsEnabled = False 

Me.mnuOuvrir.IsEnabled = True 
End Sub 

Public Sub CI ick_EnLigne (ByVal sender As Object 
, ByVal e As RoutedEventArgs) 

Me.mnuEnLigne. IsChecked = 

Not Me.mnuEnLigne. IsChecked 

End Sub 
End Class 

La syntaxe d'ecriture des methodes appelees par les evenements est tout a fait 
conforme a ce que nous avons vu dans le chapitre reserve a ce sujet. 



^ention 

™ Probleme avec I'lntelliSense 

Actuellement, I'lntelliSense ne reconnait pas directement les noms que nous 
avons ajoutes. Recompilez votre projet et ceux-ci apparaitront. 



ius^ 



Pour changer notre menu, nous devons simplement modifier les proprietes 
IsChecked et IsEnabled qui correspondent aux attributs du meme nom. 



^uca 

V" Inverser une valeur 

Nous ne devons pas connaltre I'etat de IsChecked pour cocher ou decocher 
I'element En ligne du menu. II suffit d'inverser la valeur pour obtenir le resultat 
souhaite, ce qui se fait simplement en reassignant la valeur a elle-meme et en 
la precedant de Not. 
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Rend re le menu dynamique 

Plutot qu'activer ou desactiver certaines options du menu, vous souhaiterez 
certainement rendre ce menu dynamique en fonction des evenements declen- 
ches. Par exemple, le menu Edition est superflu si le fichier n'a pas ete ouvert. 

Pour pouvoir acceder a toutes les fonctionnalites d'un menu depuis le code 
.NET, il suffit de manipuler l'objet de la classe Menu, qui est forcement 
instancie. Pour y acceder facilement, il doit etre nomme et, oups, nous ne 
l'avons pas fait ! Reparons vite cet oubli. 

<Window x:Class="Windowl" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Title="Les menus avec XAML" 

> 

<DockPanel> 

<Menu Name="mnuMain" VerticalAl ignment="Top" 
Height="20" DockPanel .Dock="Top"> 
<MenuItem Name="mnuFichier" Header="Fichier"> 
<MenuItem Name="mnuOuvrir" Header="0uvri r" 
Click="Click_OuvHr"/> 
<MenuItem Name="mnuFermer" Header="Fermer" 
I sEnabl ed=" Fal se" CI i ck="Cl i ck_Fermer"/> 
</MenuItem> 

<MenuItem Name="mnuEdition" Header="Edition" 
Visibi" 1 ity="Col 1 apsed"> 
<MenuItem Name="mnuCopier" Header="Copier"/> 
<MenuItem Name="mnuColler" Header="Col ler"/> 
<Separator /> 

<MenuItem Name="mnuLivre" Header="Livre"> 

<MenuItem Name="mnuPrec" Header="Precedent"/> 
<MenuItem Name="mnuSuiv" Header="Suivant"/> 

</MenuItem> 
</MenuItem> 

<MenuItem Header="Aide"> 

<MenuItem Name="mnuEnLigne" Header="En ligne" 
IsChecked="True" CI ick="Cl ick_EnLigne"/> 
</MenuItem> 
</Menu> 
</DockPanel> 
</Wi ndow> 

Comme vous pouvez le constater, tous les elements du menu sont maintenant 
nommes, ce qui nous permettra d' acceder a n'importe lequel des elements. 

Un autre attribut important a egalement ete ajoute. L'attribut Visibili ty permet 
de cacher ou d'afficher un element. II peut prendre trois valeurs differentes. 
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■ visible : l'element est affiche. 

■ hidden : l'element n'est pas affiche mais sa place est reservee. 

■ col 1 apsed : l'element n'est pas affiche et sa place n'est pas reservee, ce qui 
provoque un emplacement des autres elements du menu. 

Pour des raisons evidentes, utilisez Collapsed plutot que Hidden. 

Imports System 

Imports System. Windows 

Imports System. Windows. Controls 

Imports System. Windows. Data 

Imports System. Windows. Documents 

Imports System. Windows. Media 

Imports System. Wi ndows .Medi a. Imagi ng 

Imports System. Windows. Shapes 

1 Interaction logic for Windowl.xaml 
Partial Public Class Windowl 
Inherits Window 

Public Sub New() 

Initial izeComponentQ 
End Sub 

Public Sub CI ick_Ouvrir(ByVal sender As Object 
, ByVal e As RoutedEventArgs) 

Me.mnuFermer.IsEnabled = True 
Me.mnuOuvrir.IsEnabled = False 

Me. mnuEdition. Visibility = Windows. Visibil ity. Visible 
End Sub 

Public Sub CI ick_Fermer(ByVal sender As Object 
, ByVal e As RoutedEventArgs) 

Me.mnuFermer.IsEnabled = False 
Me.mnuOuvrir.IsEnabled = True 
Me. mnuEdition. Visibility = 

Windows. Visibil ity. Col lapsed 

End Sub 

Public Sub CI ick_EnLigne (ByVal sender As Object 
, ByVal e As RoutedEventArgs) 

Me.mnuEnLigne.IsChecked = Not Me.mnuEnLigne. IsChecked 
End Sub 

End Class 

L'ecran au demarrage se presente comme ceci. 
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■ Les menus avec XAML 


SIS SI 


Fichier E 




Ouvrir 

Fermer 





< Figure 6-5 : Menu 
dynamique 



Mais, apres avoir clique sur Ouvrir, le menu Edition est ajoute. 



■ Les menus avec XAML Q[6)(5<] 


M -diticn Aide 


Fermer 









< Figure 6-6 : Menu 
dynamique 



Grace a l'utilisation de la propriete Visibility, le code .NET est tres simple. 
Cela necessite de penser completement le menu dans le module de base. Si 
vous etes amene a ajouter un menu de maniere totalement dynamique, 
c'est-a-dire sans qu'il soit prevu initialement, vous devrez le faire uniquement 
au moyen de code .NET. 

6.2 Creer un menu contextuel 

Comme son nom l'indique, le menu contextuel est destine a offrir un menu 
specifique a 1' element auquel il est attache. L'acces a ce menu se fait grace au 
clic droit de la souris. II est de plus en plus couramment utilise dans toutes les 
applications et plus seulement les applications professionnelles. D'autant que sa 
programmation est en definitive relativement aisee. 

Pour illustrer le menu contextuel, nous allons associer l'exemple precedent avec 
l'exemple repris dans le paragraphe sur le Canvas. Le menu contextuel est 
associe au Canvas. 

<Window x:Class="Windowl" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
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Title="Les menus avec XAML" 

> 

<DockPanel> 

<Menu Name="mnuMain" VerticalAl ignment="Top" 
Height="20" DockPanel .Dock="Top"> 
<MenuItem Name="mnuFichier" Header="Fichier"> 
<MenuItem Name="mnuOuvrir" Header="Ouvri r" 

Click="Click_Ouvrir"/> 
<MenuItem Name="mnuFermer" Header="Fermer" 
IsEnabled=" False" CI ick="Click_Fermer"/> 
</MenuItem> 

<MenuItem Name="mnuEdition" Header="Edition" 
Visibility="Collapsed"> 

<MenuItem Name="mnuCopier" Header="Copier"/> 
<MenuItem Name="mnuColler" Header="Coller"/> 
<Separator /> 

<MenuItem Name="mnuLivre" Header="Livre"> 
<MenuItem Name="mnuPrec" 
Header="Precedent" 
Click="Click_Prev"/> 
<MenuItem Name="mnuSuiv" 
Header="Suivant" 
Click="Click_Next"/> 
</MenuItem> 
</MenuItem> 

<MenuItem Header="Aide"> 

<MenuItem Name="mnuEnLigne" Header="En ligne" 
IsChecked="True" Click="Click_EnLigne"/> 
</MenuItem> 
</Menu> 

<Canvas Name="frmData" IsEnabled="False" 
Background="LightBlue" DockPanel .Dock="Bottom"> 
<Canvas . ContextMenu> 
<ContextMenu> 

<MenuItem Header=" Precedent" 
Click="Click_Prev"/> 
<MenuItem Header="Suivant" 
Click="Click_Next"/> 
</ContextMenu> 
</Canvas . ContextMenu> 
<Labe1 Name="lblNom" Canvas. Top="10" 
Canvas. Left="10"> 

Nom 
</Label> 

<TextBox Name="txtNom" Canvas. Top="10" 
Canvas. Left="80" Wi'dth="150" MaxLength="30" 
CharacterCasing="Upper" /> 

<Label Name="lblPrenom" Canvas. Top="10" 
Canvas. Left="240"> 
Prenom 
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</Label> 

<TextBox Name="txtPrenom" Canvas. Top="10" 
Canvas. Left="300" Width="130" MaxLength="30"/> 

<Label Name="lblAdr" Canvas. Top="40" 
Canvas. Left="10"> 
Rue 

</Label> 

<TextBox Name="txtAdr" Canvas. Top="40" 
Canvas. Left="80" Width="350" 
MaxLength="80"/> 

<Label Name="lblCP" Canvas. Top="70" 
Canvas. Left="10"> 

Code postal 
</Label> 

<TextBox Name="txtCP" Canvas. Top="70" 

Canvas. Left="80" 

Width="50" MaxLength="5"/> 
<Label Name="l bl Local ite" Canvas. Top="70" 

Canvas. Left="150"> 

Local ite 
</Label> 

<TextBox Name="txtLocal i te" Canvas. Top="70" 
Canvas. Left="200" Width="230" MaxLength="50"/> 

<Border Width="100" Height="120" 
BorderThickness="l" 

Background="White" BorderBrush=" Black" 
Canvas. Top=" 10" Canvas. Right="10"> 
<TextBlock Name="bl kPhoto" 
Verti cal Al i gnment="Center" 
Hon' zontal Al ignment="Center" FontSi ze="20"> 

Photo 
</TextBlock> 
</Border> 

<Label Name="lblCopyright" Canvas. Bottom=" 10" 
Canvas. Ri ght=" 10" 

Content="Micro Application 2006" /> 
</Canvas> 
</DockPanel> 
</Wi ndow> 

Le code VB.NET associe est modifie comme ceci. 

1 Interaction logic for Windowl.xaml 
Partial Public Class Windowl 
Inherits Window 

Public Sub New() 

Initial izeComponentQ 
End Sub 
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Public Sub CI ick_Ouvrir(ByVal sender As Object 
, ByVal e As RoutedEventArgs) 
Me.mnuFermer.IsEnabled = True 
Me.mnuOuvrir.IsEnabled = False 

Me. mnuEdition. Visibility = Windows. Visibil ity. Visible 
Me. frmData. Is Enabled = True 
End Sub 



Public Sub CI ick_Fermer(ByVal sender As Object 
, ByVal e As RoutedEventArgs) 
Me.mnuFermer.IsEnabled = False 
Me.mnuOuvrir.IsEnabled = True 

Me. mnuEdition. Visibility = Windows. Visibility. Collapsed 
Me. frmData. Is Enabled = False 
End Sub 

Public Sub CI ick_EnLigne (ByVal sender As Object 
, ByVal e As RoutedEventArgs) 
Me.mnuEnLigne. IsChecked = Not Me.mnuEnLigne. IsChecked 
End Sub 



Public Sub CI ick_Prev (ByVal sender As Object 
, ByVal e As RoutedEventArgs) 
' Code pour precedent 
End Sub 

Public Sub CI ick_Next (ByVal sender As Object 
, ByVal e As RoutedEventArgs) 
' Code pour suivant 
End Sub 



End Class 
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Code post 



Photo 



▲ Figure 6-7 : Le menu contextuel dans un environnement inactif 
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Si vous essayez d'activer le menu contextuel, rien ne se passe. Le menu n'est 
pas accessible car le canevas est desactive. L' activation du canevas est realisee 
dans la methode CI i ck Ouvri r. Apres avoir effectue Fichier, Ouvrir, le menu 
contextuel est maintenant actif. 



I Les menus avec XAML 



QUI® 




▲ Figure 6-8 : Le menu contextuel 
Toutefois, les boites de texte conservent leur menu contextuel par defaut. 




Micro Application 2006 



▲ Figure 6-9 : Le menu contextuel par defaut 

Si vous desirez les remplacer, il faudra creer un autre menu contextuel. 

Remplacez le premier TextBox par celui-ci et il possedera son propre menu 
contextuel. Evidemment, dans l'exemple, il est tres simplifie. Aucune action ne 
lui est associee mais cela, vous savez deja comment le resoudre. 

<TextBox Name="txtNom" Canvas. Top="10" Canvas. Left="80" 
Width="150" MaxLength="30" CharacterCasing="Upper"> 
<TextBox . ContextMenu> 
<ContextMenu> 

<MenuItem Header="Copier"/> 
<MenuItem Header="Coller"/> 
</ContextMenu> 
</TextBox . ContextMenu> 
</TextBox> 
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■4 Figure B-1 0 : Un 

menu contextuel dans 
une bofte de texte 



0^^^. Vous trouverez page 132 comment partager un menu contextuel entre 
Renvoi plusieurs elements de I'ecran. 



6.3 Creer une barre d'outils 
Une barre d'outils statique 

La barre d'outils est creee grace a un objet de la classe Tool Bar. Pour placer les 
elements dans la barre d'outils, il n'y a qu'a ajouter au sein du nceud Tool Bar 
les controles que vous souhaitez voir apparaitre. Generalement, une barre 
d'outils est principalement composee de boutons. 

En ajoutant le code suivant derriere la balise fermante Menu de notre exemple 
precedent, nous obtiendrons directement une barre d'outils tout a fait fonction- 
nelle. 



<ToolBar DockPanel .Dock="Top 


" Height="24"> 


<Button ToolTip="Ouvrir" 


Click="Click_Ouvrir"> 


<Image> 




<Image.Source> 




<Bi tiding Source= 


'open.bmp"/> 


</Image.Source> 




</Image> 




</Button> 




<Button ToolTip="Fermer" 


Click="Click Fermer"> 


<Image> 




<Image.Source> 




<Binding Source= 


'close. bmp"/> 


</Image.Source> 




</Image> 




</Button> 




<Button Tool Tip=" Precedent" Click="Click Prev"> 


<Image> 




<Image.Source> 




<Binding Source= 


1 precedent. bmp"/> 


</Image.Source> 




</Image> 




</Button> 




<Button ToolTip="Suivant" 


Click="Click_Next"> 


<Image> 




<Image.Source> 




<Binding Source= 


'suivant. bmp"/> 
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</Image.Source> 
</Image> 
</Button> 

</Tool Bar> 



I Les menus avec XAMI 



Rchter Aide 

-J w *J - 



EES 



Photo 



A Figure 6-11 : Une simple barre d'outils 



^arque 

Of Positionnement de la barre d'outils 

Nous avons ici utilise un DockPanel pour placer la barre d'outils et le menu 
mais nous aurions tout aussi bien pu utiliser une grille, un StackPanel ou mime 
un WrapPanel. Le canevas est quant a lui moins approprie, mais pourquoi pas 



ne 



La barre d'outils peut contenir d'autres controles que le bouton. Par exemple 
une ComboBox. 



<ToolBar DockPanel .Dock="Top" Height="24"> 

<Button ToolTip="Ouvrir" Click="Click_Ouvrir"> 
<Image> 

<Image.Source> 

<Binding Source="open.bmp"/> 
</Image.Source> 
</Image> 
</Button> 

<Button ToolTip="Fermer" Click="Click_Fermer"> 
<Image> 

<Image.Source> 

<Binding Source="close.bmp"/> 
</Image.Source> 
</Image> 
</Button> 

<Button Tool Tip=" Precedents 
<Image> 

<Image.Source> 
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<Bi ndi ng Source= "precedent . bmp"/> 
</Image.Source> 
</Image> 
</Button> 

<Button ToolTip="Suivant"> 
<Image> 

<Image.Source> 

<Bi ndi ng Source= "sui vant . bmp"/> 
</Image.Source> 
</Image> 
</Button> 
<Separator/> 
<ComboBox Width="80"> 

<ComboBoxItem I sSel ected= "True"> 

Par nom 
</ComboBoxItem> 
<ComboBoxItem> 
Par local ite 
</ComboBoxItem> 
</ComboBox> 
</ToolBar> 



I Les menus avec XAML 



Photo 



▲ Figure 6-12 : Barre d'outils avec ComboBox 



marque ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

Separateur 

La ComboBox est precedee d'un separateur. II ne s'agit absolument pas d'une 
obligation. Vous pouvez placer des separateurs ou bon vous semble simplement 
en y placant la balise Separator comme dans le code ci-dessus. 



Un ensemble de barres d'outils 

Les applications modernes ne se contentent pas d'afficher une seule barre 
d'outils mais affichent bien un ensemble dans lequel vous pouvez deplacer ou 
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redimensionner a votre guise les differentes barres d'outils. Avec XAML, nous 
pouvons creer un conteneur dans lequel nous allons placer nos barres d'outils. 
Elles pourront etre alors deplacees ou redimensionnees par l'utilisateur dans 
l'espace determine par le conteneur. Si l'utilisateur reduit trop la taille d'une 
barre d'outils, les elements qui ne sont plus affichables sont automatiquement 
ajoutes dans une zone de depassement et rendus accessibles via la petite fleche 
qui marque la fin de la barre d'outils. 

Pour creer un conteneur, vous devez utiliser la balise Tool BarTray. 

<Tool Bar-Tray DockPanel .Dock="Top" IsLocked="Fal se" 
Background^ 1 Li ghtGray"> 
<ToolBar Band="0" Height="24"> 

<Button ToolTip="Ouvrir" Click="Click_Ouvrir"> 
<Image> 

<Image.Source> 

<Binding Source="open.bmp"/> 
</Image.Source> 
</Image> 
</Button> 

<Button ToolTip="Fermer" Click="Click_Fermer"> 
<Image> 

<Image.Source> 

<Binding Source="close.bmp"/> 
</Image.Source> 
</Image> 
</Button> 

<Button ToolTip="Precedent"> 
<Image> 

<Image.Source> 

<Bi ndi ng Source= "precedent . bmp"/> 
</Image.Source> 
</Image> 
</Button> 

<Button ToolTip="Suivant"> 
<Image> 

<Image.Source> 

<Bi ndi ng Source="sui vant . bmp"/> 
</Image.Source> 
</Image> 
</Button> 
</ToolBar> 

<ToolBar Band="l" Height="24"> 
<ComboBox Width="80"> 

<ComboBoxItem IsSel ected="True"> 

Par nom 
</ComboBoxItem> 
<ComboBoxItem> 
Par local ite 
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</ComboBoxItem> 
</ComboBox> 

</Tool Bar> 
</ToolBarTray> 



Vous pouvez constater que la barre d'outils precedemment creee a ete scindee 
en deux au niveau du separateur. C'est maintenant la ToolBarTray qui re9oit 
l'attribut DockPanel .Dock. Pour eviter un fond blanc, l'attribut Background 
recoit la valeur LightGray. 

L'attribut Band dans la balise Tool Bar permet de fixer le numero de ligne dans 
lequel vous desirez voir apparaitre la barre d'outils. 
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Figure 6-13 : Des barres d'outils 
mobiles 



L'utilisateur peut deplacer les barres d'outils, soit pour les rassembler sur une 
meme ligne, soit pour les inverser. II ne pourra en revanche pas les decaler vers 
la gauche en laissant un espace entre les barres d'outils. 
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■< Figure 6-14 

mobiles 



□es barres d'outils 



^uca 

7 Bloquer les barres d'outils 

La propriete IsLocked permet de specifier si les barres d'outils contenues sont 
mobiles ou non. II est possible de le specifier individuellement pour chaque barre 
en introduisant dans la balise de la barre concernee l'attribut 
Tool BarTray . IsLocked. 



Si vous souhaitez afficher la barre d'outils a gauche plutot qu'en haut de 
l'ecran, c'est tres simple. Vous changez l'attribut Orientation et c'est prati- 
quement tout. 

<ToolBarTray DockPanel .Dock="Left" IsLocked="False" 
Background="LightGray" Orientation="Vertical "> 
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En effet, il est egalement judicieux de changer le docking, sans quoi le resultat 
ne sera pas celui espere. 



^ention ^^^^^^^^^^^^^^^^^ 

^" Ordre des lignes 

Vu le changement d'orientation, les lignes definies par I'attribut Band deviennent 
des colonnes. C'est pourquoi il est preferable dans notre exemple de fixer 
valeur a □ pour les deux barres d'outils. 



mt 

y 



<ToolBar Band="0"> 

^ention ^^^^^^^^^^^^^^^^^^^^^^^^ 

* Hauteur des lignes 

Pour les mimes raisons, la hauteur qui etait fixee a 24 points doit etre adaptee 
pour par exemple devenir automatique. Pour y arriver, retirez I'attribut Height 
de chaque balise Tool Bar. 
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Par nom 













■4 Figure B-1 5 : 

barres d'outils a 
gauche 



Des 



Avec ces barres d'outils flottantes, nous devons nous pencher d'un peu plus 
pres sur la zone de debordement. Si vous reduisez la taille de la premiere barre 
d'outils en montant la seconde, la zone de debordement indiquee par la fleche 
maintenant noire et non plus grise est activee. Malheureusement, si vous tentez 
de l'utiliser, l'icone cachee va bel et bien s'afficher mais en tres grand. Pour 
eviter ce probleme, il est prudent d'utiliser les attributs MaxWidth et MaxHeigth 
des images des differents boutons. Les autres controles eventuels doivent subir 
le meme traitement. 



<Image MaxHeight="24" MaxWidth="24"> 
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■4 Figure 6-1 6 : 

Zone de debordement 
de la barre d'outils 



Si vous souhaitez changer l'ordre des barres d'outils sans deplacer tout le code, 
vous pouvez simplement utiliser l'attribut Bandlndex. Dans l'exemple, assignez 
1 a cet attribut pour la premiere barre d'outils. 

ToolBar Band="0" Bandlndex="l"> 
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Figure 6-17 : drdre des barres 
d'outils 



^ention 

^ Numerotation 

Pour rappel, la numerotation commence a □. 



6.4 Checklist 

Dans ce chapitre, nous avons vu comment creer et manipuler les menus et 
particulierement comment : 

■ creer un menu d' application complet avec sous-menu et menus imbriques ; 

■ rendre un menu dynamique ; 

■ creer un menu contextuel ; 

■ creer et manipuler une barre d'outils. 
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Lier les donnees a un DataSet 1 92 

Lier les donnees a un objet metier 203 

Lier les donnees sans utiliser le code .NET .... 207 
Checklist 218 
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Outre la possibility d'assigner vous-meme les valeurs aux differents controles, 
vous aurez certainement envie de mettre en place des techniques comme la 
liaison aux donnees (Data Binding) pour lier vos controles avec les donnees qui 
doivent y etre reprises. Cette technique n'est pas neuve mais nous allons voir 
comment la mettre en oeuvre avec XAML. 



7.1 Lier les donnees a un DataSet 

Tout d'abord, nous devons disposer d'un DataSet. Pour que vous puissiez 
realiser vous-meme l'exercice sans devoir installer un gestionnaire de bases de 
donnees quelconque, le choix de realiser un DataSet vers une base de donnees 
MS-Access dont vous pouvez voir la structure dans l'ecran ci-dessous semble 
le plus judicieux. 



Explorateur de bases de do... •» Q X |H 






□ |_JJ Connexions de donnees 




Q Tables 




□ 


^ Carnet adresses 






t] Norn 






_^ Prenom 






J$ Adresse 












_^ Localite 






]] Photo 




IB ^ Vues 




S C3 Procedures stod<ees 




ffl ^ Fonctions 





■< Figure 7-1 : Structure de la table 



Une fois la base de donnees creee, nous devons l'ajouter a notre projet. 
Choisissez dans le menu de Visual Studio Donnees... - Ajouter une nouvelle 
source de donnees... 



Assistant Configuration de source de donnees X 



Choisir un type de source de donnees 



A partir d'oii I'application obtiendra-t-elle les donnees ? 



■ (Ik 




Service Web 


Objet 


Vous permet de vous connecter a u 


i? be.se de- donnees et de- ihoisii le; obieti de bese de 


donnees pour votre application. '_ette option cree un DataSet. 



Suivant 5 | Anriulei 



A Figure 7-2 : Ajouter une source de donnees 
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Si ce n'est deja fait, choisissez l'option Base de donnees et cliquez sur Suivant. 
Cliquez sur le bouton Nouvelle connexion... et ensuite sur le bouton Modifier. 



Modifier la source de donnees 



bout :e de donnees : 



Fichier de base de donnees Mic-osof: access 



Description 

Utilise z cette selection pour attacher un fichier 
de base de donnees a une instance Microsoft 
SQL Server locale (notamment Microsoft SQL 
Express) a I 'aide du fournisseur de donnees 
,NET Framework pour SQL Server, 



Fournisseur de donnees : 



Fournisseur de donnees .NET Framework pour 
Toujour; utilise! cette selection 



▲ Figure 7-3 : Modifier le type de base de donnees 

Cliquez maintenant sur le bouton Parcourir, choisissez la base de donnees que 
vous venez de creer et cliquez sur OK puis sur Suivant. 



Assistant Configuration de source de donnees 



It 



Choisir vos objets de base de donnees 



','L.els objets de base de donnees souhaitez-vous dans votre dataset ? 



0 JE 

ffl 0 3 Carnet adresses 
ffl _03 Pays 
B% Vues 



DBXAMLDataSet 



< Precedent 



A Figure 7-4 : Contenu a inclure dans le DataSet 
Selectionnez la table a inclure dans le DataSet. 



Explorateur de solutions 



appmcnu 

+ ^ My Project 
S3 References 

i ' CJ bin 

a lj ob) 

app.config 

i ijjiir~ 

l§] MyApp.xaml 

MyApp.xaml.vb 
ffi] Window l.xaml 
g Windowl .xaml.vb 



A Figure 7-5 : Un DataSet fortement 
type 
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Le DataSet est maintenant cree. II ne nous reste qu'a l'inclure dans notre 
programme. Modifiez le code de Window1.xaml.vb pour refleter le code 
ci-dessous. 



Private m_data As New DBXAMLDataSet 
Private m_i As Integer 

Public Sub New() 

Initial izeComponent() 
Dim adapter As New 

DBXAMLDataSetTabl eAdapters . Carnet_adressesTabl eAdapter 
adapter. Fil 1 (m_data.Carnet_adresses) 
End Sub 



Une fois cette etape realisee, nous devons maintenant associer le DataSet a 
notre fenetre. Commencons par ajouter la gestion de l'evenement Loaded de la 
fenetre. 

<Window x:Class="Windowl" 
xmlns= 

"http://schemas .mi crosoft.com/wi nfx/2006/xaml /presentati on" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Title="Les menus avec XAML" 
Loaded="Win_l oaded" 

> 



La methode Win_l oaded est appelee apres le chargement de la fenetre. Dans 
cette methode, nous allons initialiser la source de donnees. 

Private Sub Win_l oaded (ByVal sender As Object 

, ByVal e As RoutedEventArgs) 

m_i = 0 

Me.DataContext = m_data.Carnet_adresses.Rows(m_i) 
End Sub 



La liaison se fait en utilisant la propriete DataContext de la fenetre. 



^arque 

Liaison a une ligne de la table 

En realite, nous ne lions pas le DataSet dans son ensemble a notre ecran mais 
lions seulement une ligne d'une table. En I'occiirrence, la premiere ligne de 
table Carnet adresses. 



lis 



II reste maintenant a lier les champs avec les zones ecran. Commencons par le 
nom. 
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<TextBox Name="txtNom" 
Canvas .Top=" 10" Canvas . Lef t="80" 
Width="150" MaxLength="30" CharacterCasing="Upper" 
Text =" {Binding Path=Nom}"> 

Pour realiser la liaison, nous devons utiliser un objet de type Binding. L'objet 
doit etre assigne a la propriete, qui doit etre liee. Pour y arriver, nous avons 
utilise une syntaxe un peu particuliere. 

Nous pouvons deja executer 1' application telle quelle. 



Les menus avec XAML 



Rchier Aide 
J) *J 



Code posts 



Photo 



ftao Antotion 2006 



▲ Figure 7-6 : Premiere liaison 

Le nom est correctement affiche a l'ecran. Faisons de meme avec les autres 
champs. 

Pour vous aider a reconstruire l'exemple, vous trouverez ci-dessous le code 
complet que nous avons deja discute precedemment. 

<Window x:Class="Windowl" 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Les menus avec XAML" 
Loaded="Win_l oaded" 

> 

<DockPanel> 

<Menu Name="mnuMain" VerticalAl ignment="Top" 
Height="20" DockPanel .Dock="Top"> 
<MenuItem Name="mnuFichier" Header="Fichier"> 
<MenuItem Name="mnuOuvri r" Header="Ouvrir" 
Click="Click_0uvrir"/> 
<MenuItem Name="mnuFermer" Header="Fermer" 

IsEnabled="False" CI ick="Cl ick_Fermer"/> 
</MenuItem> 

<MenuItem Name="mnuEdition" Header="Edition" 
Visibility="Collapsed"> 
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<MenuItem Name="mnuCopier" Header="Copier"/> 
<MenuItem Name="mnuCol ler" Header="Coller"/> 
<Separator /> 

<MenuItem Name="mnuContact" Header="Contact"> 
<MenuItem Name="mnuPrec" 

Header="Precedent" 

CI ick="Cl ick_Prev"/> 
<MenuItem Name="mnuSuiv" 

Header="Suivant" 

Click="Click_Next"/> 
</MenuItem> 
</MenuItem> 

<MenuItem Header="Aide"> 

<MenuItem Name="mnuEnLigne" Header="En ligne" 
IsChecked="True" CI i ck="Cl i ck_EnLi gne"/> 
</MenuItem> 
</Menu> 

<ToolBarTray DockPanel .Dock="Left" IsLocked="Fal se" 
Background="LightGray" Grientation="Vertical "> 
<ToolBar Band="0"> 

<Button ToolTip="Ouvrir" Click="Click_Ouvrir"> 
<Image MaxHeight="24" MaxWidth="24"> 
<Image.Source> 

<Binding Source="open.bmp"/> 
</Image.Source> 
</Image> 
</Button> 

<Button ToolTip="Fermer" CI ick="Cl ick_Fermer"> 
<Image MaxHeight="24" MaxWidth="24"> 
<Image.Source> 

<Binding Source="close.bmp"/> 
</Image.Source> 
</Image> 
</Button> 

<Button Tool Tip=" Precedent" Click="Click_Prev" 
<Image MaxHeight="24" MaxWidth="24"> 
<Image.Source> 

<Bi ndi ng Source=" precedent . bmp"/> 
</Image.Source> 
</Image> 
</Button> 

<Button ToolTip="Suivant" Click="Click_Next"> 
<Image MaxHeight="24" MaxWidth="24"> 
<Image.Source> 

<Bi riding Source=" suivant.bmp"/> 
</Image.Source> 
</Image> 
</Button> 
</ToolBar> 
<ToolBar Band="0"> 
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<ComboBox Width="80"> 

<ComboBoxItem IsSel ected="True"> 

Par nom 
</ComboBoxItem> 
<ComboBoxItem> 
Par local ite 
</ComboBoxItem> 
</ComboBox> 
</ToolBar> 
</Tool BarTray> 

<Canvas Name="frmData" IsEnabled="False" 
Background="LightBl ue" DockPanel .Dock="Bottom"> 
<Canvas . ContextMenu> 
<ContextMenu> 

<MenuItem Header=" Precedent" 
Click="Click_Prev"/> 
<MenuItem Header="Suivant" 
CI ick="Cl ick_Mext"/> 
</ContextMenu> 
</Canvas . ContextMenu> 
<Label Name="lblNom" Canvas. Top="10" 
Canvas. Left="10"> 

Nom 
</Label> 

<TextBox Name="txtl\lom" Canvas. Top="10" 
Canvas. Left="80" Width="150" 
MaxLength="30" CharacterCasing="Upper" 
Text ="{Binding Path=Nom}"> 
<TextBox . ContextMenu> 
<ContextMenu> 

<MenuItem Header="Copier"/> 
<MenuItem Header="Col ler"/> 
</ContextMenu> 
</TextBox . ContextMenu> 
</TextBox> 

<Label Name="l bl Prenom" Canvas. Top="10" 
Canvas. Left="240"> 

Prenom 
</Label> 



C'est a partir d'ici que le code est effectivement modifie. Pour chacun des 
TextBox un objet de type Binding est assigne a la propriete Text. 



<TextBox Name="txtPrenom" Canvas. Top=' 


'10" 


Canvas. Left="300" Width="130" MaxLengtlr 


= "30" 


Text ="{Binding Path=Prenom} "/> 




<Label Name="lblAdr" Canvas. Top="40" 




Canvas. Left="10"> 




Rue 





Le guide du codeur • 197 



Lier les donnees a son interface utilisateur 

v 



</Label> 

<TextBox Name="txtAdr" Canvas. Top="40" 
Canvas. Left="80" Width="350" MaxLength="80" 
Text =" {Binding Path=Adresse}"/> 

<Label Name="l blCP" Canvas. Top="70" 
Canvas. Left="10"> 
Code postal 

</Label> 

<TextBox Name="txtCP" Canvas. Top="70" 
Canvas. Left="80" Width="50" MaxLength="5" 
Text ="{ Binding Path=CP}"/> 

<Label Name= "lbl Local ite" Canvas. Top="70" 
Canvas. Left="150"> 
Local ite 

</Label> 

<TextBox Name="txtLocal ite" Canvas. Top="70" 
Canvas. Left="200" Width="230" MaxLength="50" 
Text =" {Binding Path=Localite}"/> 

<Border Width="100" Height="120" 
BorderThickness="l" 

Background 1 "White" BorderBrush= "Black" 
Canvas . Top=" 10" Canvas . Ri ght=" 10"> 

<Image Source=" {Binding Path=Photo} "/> 
</Border> 

<Label Name="lblCopyright" Canvas. Bottom=" 10" 
Canvas. Right="10" 

Content="Micro Application 2006" /> 
</Canvas> 
</DockPanel> 
</Wi ndow> 



v^arque 

Autres modifications 

Au passage, la gestion des evenements Click a ete ajoutee dans la barre 
d'outils pour faire appel aux methodes Click_Next et Click_Prev. 



rr^^ 



■ Les menus avoc XAML 






Fichier Aide 










~ |^ | — 1^ 1 






Run ] Rue de la vatae, 25 I 

























A Figure 7-7 : Liaison a un DataSet 
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La fenetre est affichee avec toutes les informations du premier enregistrement. 



▼ Contenu du champ Photo 

Le champ Photo contient le chemin des images et non I'image elle-mime. 



J 



En revanche, rien ne se passe si vous cliquez sur Suivant. Nous devons encore 
ajouter la gestion des changements d' enregistrement. 

Public Sub CI ick_Prev (ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
' Code pour precedent 
If m_i > 0 Then 
m_i = m_i - 1 

Me.DataContext = m_data.Carnet_adresses.Rows(m_i) 
End If 
End Sub 

Public Sub CI ick_Next (ByVal sender As Object _ 
, ByVal e As RoutedEventArgs) 
' Code pour suivant 

If m_i < m_data.Carnet_adresses. Rows. Count - 1 Then 
m_i = m_i + 1 

Me.DataContext = m_data.Carnet_adresses.Rows(m_i) 
End If 
End Sub 



Le champ m i permet de conserver en memoire la position courante dans la 
DataTabl e. Ce code integre les instructions pour eviter de depasser les limites 
de la table. Comme vous pouvez le constater, il suffit d' adapter le DataContext 
pour qu'il contienne la ligne voulue. Maintenant, 1' enregistrement change 
lorsque vous demandez le suivant ou le precedent. 



■ Les menus avec XAML 




F rh er 




tan 1 Durant | Prenom 1 AJben 


9- 


Rue J Rue des ccpeaux, 3 1 


Code portal Ljs67 1 inU fp^i^b^ f 







A Figure 7-8 : Changer d'enregistrement 



Idealement, il faudrait desactiver les boutons Precedent et Suivant des 
differents menus quand ceux-ci ne peuvent etre realises. 
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0^^^.Pour y arriver, reportez-vous au chapitre Rendre un element du 
Renvoi menu inactif page 172. 

Vous pouvez modifier une valeur dans l'ecran, changer d'enregistrement et 
revenir sur celui que vous avez modifie, les modifications sont toujours 
presentes. 



^ention ^^^^^^^^^^^^^^ 

7 Enregistrement dans la base de donnees 

Les donnees sont bien sauvees dans le DataSet mais le code en I'etat 
n'enregistre pas le DataSet dans la base de donnees. Les modifications sont 
des lors perdues au moment oil vous quittez le programme. 



tat I 
jnt 



Par exemple, nous pouvons enregistrer les donnees dans la base de donnees lors 
de l'operation de fermeture. Modifiez le code pour refleter le code ci-dessous. 

Private m_adapter As 

DBXAMLDataSetTabl eAdapters . Carnet_adressesTabl eAdapter 

Public Sub New() 

Initial izeComponent() 

m_adapter = New _ 
DBXAMLDataSetTabl eAdapters . Carnet_adressesTabl eAdapter 

m_adapter.Fil 1 (m_data.Carnet_adresses) 
End Sub 



Public Sub CI ick_Fermer(ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
Me.mnuFermer.IsEnabled = False 
Me.mnuOuvrir.IsEnabled = True 
Me. mnuEdition. Visibility = 

Wi ndows .Visibility. Col 1 apsed 
Me. frmData. Is Enabled = False 
m_adapter. Update (m_data) 
End Sub 



^arque 

^ Nouveau champ dans la classe 

L'objet m_adapter precedemment defini comme variable locale dans le cons- 
tructeur devient un champ de la classe. De cette facon, il peut etre utilise dans 
la methode Click Fermer. 



La base de donnees sera des lors correctement enregistree. 
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Plusieurs sources de donnees 

Dans I'exemple, nous avons travaille avec un seul DataContext defini pour tout 
I'ecran. II est possible de definir un DataContext different pour chaque element 
de la fenetre. 



lut 
mt I 



II est egalement possible d'utiliser une table pour charger un controle de type 
liste. 

Si vous souhaitez reproduire I'exemple, modifiez votre base de donnees et 
recreez le schema XSD pour refleter le graphique ci-dessous. 



Nom 
Prenom 
Adresse 
CP 

Localite 
Photo 
* Id 
Pays 



pa r 



Fill.GetData () 



Id 

Pays 



'fit PaysTableAdapter [s] 



P°D Fill.GetData Q 



Figure 7-9 : 

Nouveau schema XSD 



Renvoi 



'Pour creer le schema, reportez-vous a la page 192. 



Ensuite, nous devons apporter quelques modifications au code .NET. 

Public Sub New() 

Initial i zeComponent () 
m_adapter = New 
DBXAMLDataSetTabl eAdapters . Carnet_adressesTabl eAdapter 
m_adapter.Fil 1 (m_data.Carnet_adresses) 
Dim adapter As New 

DBXAMLDataSetTabl eAdapters . PaysTabl eAdapter 
adapter. Fill (m_data.Pays) 
End Sub 



Non seulement nous chargeons le membre m_data avec la DataTable Carne- 
t_adresses mais nous chargeons egalement la table Pays. 

Private Sub Win_loaded(ByVal sender As Object 

, ByVal e As RoutedEventArgs) 

m_i = 0 

Me. DataContext = m_data.Carnet_adresses.Rows(m_i) 
Me. IstPays. DataContext = m_data 
End Sub 
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La table Pays est maintenant chargee dans le DataSet et le DataContext de la 
liste est different de celui du reste de l'ecran. 

Ajoutez ces balises dans le code XAML. 

<Label Canvas. Top="100" Canvas. Left="150"> 

Pays 
</Label> 

<ListBox Name="lstPays" Canvas. Top="100" 
Canvas. Left="200" 
ItemsSource=" {Bi ndi ng Path=Pays} " 
Di spl ayMemberPath= " Pay s " /> 

Remarquez que la source est non pas un champ mais une table. C'est l'attribut 
Di spl ayMemberPath qui precise le nom du champ a afficher. Dans cet exemple, 
le nom est le meme car il s'agit du champ Pays dans la table Pays. 



■ Les menus avec XAML 






■JUL, 


Rchier Aide 










Louse 
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Micro Application 2006 















A Figure 7-10 : ListBox liee a un DataSet 



Cette solution fonctionne parfaitement pour charger la liste mais, du coup, il ne 
nous est pas possible de lier la valeur a notre carnet d'adresses. 

La solution la plus simple est de modifier a nouveau le code .NET. 

Private Sub Win_loaded(ByVal sender As Object 

, ByVal e As RoutedEventArgs) 

m_i = 0 

Me. DataContext = m_data.Carnet_adresses.Rows(m_i) 
Dim bind As New Binding("Pays") 
bind. Source = m_data 

Me. I stPays .SetBi ndi ng (Li stBox. ItemsSourceProperty 
, bind) 

End Sub 
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Le code XAML devient alors : 

<ListBox Name="l stPays" Canvas. Top="100" 
Canvas. Left="200" 
Di spl ayMemberPath="NomPays" 
SelectedValue=" {Binding Path=Pays}" 
SelectedValuePath="Id" 
/> 

De cette fafon, une source specifique est definie pour la liste et la source par 
defaut pour la valeur. 

Cet exemple demontre non seulement qu'il est possible de realiser des liaisons 
vers divers objets mais egalement que la liaison peut etre effectuee sur 
differents attributs. Vous pourriez par exemple definir une liaison sur la couleur 
du fond. 



7.2 Lier les donnees a un objet metier 

Au lieu de lier les donnees a un DataSet, vous pouvez egalement les lier a un 
objet quelconque. Generalement, il s'agira d'un objet dit metier. En effet, en 
programmation professionnelle, les developpements sont generalement divises 
en trois couches, la couche de liaison a base de donnees, la couche metier, dite 
business, et la couche de presentation. La couche de presentation lit les donnees 
non pas directement dans la couche d'acces a la base de donnees mais 
uniquement dans la couche metier, qui prendra en charge une eventuelle 
transformation des donnees. 

Nous allons construire un objet metier capable de recevoir les donnees de notre 
exemple. 

Public Class Business 

Private m_nom As String 

Private m_prenom As String 

Private m_adresse As String 

Private m_cp As String 

Private m_localite As String 

Private m_pays As Integer 

Public Property Nom() As String 
Get 

Return m_nom 
End Get 

Set(ByVal value As String) 
m_nom = value. ToUpperQ 
End Set 
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End Property 

Public Property PrenomQ As String 
Get 

Return m_prenom 
End Get 

Set(ByVal value As String) 

m_prenom = val uel i 
End Set 
End Property 

Comme vous pouvez le voir, il s'agit essentiellement de definir des membres 
prives et les proprieties qui leur sont associees. Vous pourriez etre tente de 
definir directement les membres comme publics et ainsi de vous passer des 
proprietes. Toutefois, il vaut mieux suivre des le depart les bonnes pratiques et 
respecter cette regie qui apportera dans revolution de votre classe beaucoup 
plus de souplesse. Sans compter que le membre defini peut pour des raisons 
metier ou techniques etre stocke d'une certaine maniere et presente aux 
utilisateurs de la classe d'une autre facon. 

Public Property AdresseQ As String 
Get 

Return m_adresse 
End Get 

Set(ByVal value As String) 

m_adresse = value 
End Set 
End Property 

Public Property CP() As String 
Get 

Return m_cp 
End Get 

Set(ByVal value As String) 

m_cp = value 
End Set 
End Property 

Public Property Local ite() As String 
Get 

Return mjocalite 
End Get 

Set(ByVal value As String) 

mjocalite = value 
End Set 
End Property 
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Public Property Pays() As Integer 
Get 

Return m_pays 
End Get 

Set(ByVal value As Integer) 

m_pays = value 
End Set 
End Property 

Pour une question de simplicity, la methode de chargement des donnees est 
incluse dans l'objet Business. II existe beaucoup de techniques differentes pour 
realiser les couches, mais nous entrons la dans des problemes d' architecture 
bien eloignes de ce qui nous occupe. Toutefois, meme avec XAML et peut-etre 
encore plus avec XAML, pensez a l'architecture que vous allez implementer 
dans votre programme avant de commencer la moindre lige de code. 

Public Sub Charger(ByVal val As Short) 
If val = 1 Then 
m_nom = "Dupond" 
m_prenom = "Louis" 
m_adresse = "Rue des coteaux, 23" 
mjocalite = "Pillion" 
m_cp = "23456" 
m_pays = 22 

Else 

m_nom = "Durand" 
m_prenom = "Albert" 
m_adresse = "Rue des poteaux, 2" 
mjocalite = "Paille" 
m_cp = "23765" 
m_pays = 24 
End If 
End Sub 

End Class 

Le but de cet exemple n'est pas de vous apprendre a travailler en couche. La 
classe metier qui vous est presentee ici est tres simplifiee et la methode de 
chargement des donnees n'est la que pour permettre d'afficher simplement un 
resultat. Typiquement, nous devrions trouver dans la classe des methodes de 
manipulation, de controle, de transformation des donnees. Linteraction entre 
l'objet metier et la couche d'acces aux donnees n'est pas geree par XAML. II 
s'agit de .NET pur. 

Le code .NET doit etre adapte pour charger l'objet metier. 

Partial Public Class Windowl 
Inherits Window 
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En tout premier, nous devons declarer notre objet metier comme membre de la 
classe. Notez que nous avons egalement conserve le DataSet. II est encore 
necessaire pour charger la liste des pays. 

Private m_data As New DBXAMLDataSet 
Private m_business As New Business 

Dans le constructeur, nous chargeons les donnees dans le DataSet et dans 
1' objet metier. 

Public Sub New() 

Initial izeComponent() 

Dim adapter As New 
DBXAMLDataSetTabl eAdapters . PaysTabl eAdapter 

adapter. Fill (m_data.Pays) 

m_business. Charger (1) 
End Sub 

La liaison proprement dite est realisee lors du chargement de la fenetre. 

Private Sub Win_loaded(ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
Dim bind As New Binding("Pays") 
bind. Source = m_data 

Me . 1 stPays . SetBi ndi ng (Li stBox . I temsSourceProperty 
, bind) 

Me.DataContext = m_business 
End Sub 

Public Sub CI ick_Prev(ByVal sender As Object 
, ByVal e As RoutedEventArgs) 

1 Code pour precedent 

m_business. Charger (1) 

Me.DataContext = Nothing 

Me.DataContext = m_business 
End Sub 

Public Sub CI ick_Next (ByVal sender As Object _ 
, ByVal e As RoutedEventArgs)" 

' Code pour suivant 

m_busi ness . Charger (2) 

Me.DataContext = Nothing 

Me.DataContext = m_business 
End Sub 

End Class 

Comme c'etait le cas pour le DataSet, l'objet metier est declare comme champ 
de la classe. II est initialise dans le constructeur et place comme source de 
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donnees dans la methode Win Load. II manque bien evidemment l'enregistre- 
ment des donnees de l'objet metier mais, la encore, il s'agit de programmation 
.NET classique. 



^uce 

7" RafraTchissement 

Afin de provoquer le rafraTchissement de I'ecran lorsque les valeurs sont 
rechargees, la valeur Nothing est chargee dans I'attribut DataContext et est 
ensuite a nouveau chargee par m_business. 



jnt 

3St I 



Selon les circonstances, vous pourriez avoir plusieurs objets metier et changer 
le DataContext pour qu'il pointe sur l'un ou l'autre. Dans ce cas, typiquement, 
vous aurez une collection d'objets metier. 



e «\arque 

Le fichier XAML n'est pas modifie 

Les liaisons se font sur les noms des proprietes de la classe. Comme nous 
avons donne les memes noms a nos proprietes que les noms des champs dans 
le schema xsd, le code XAML peut rester tel que. 



us 



En definitive, cet exemple demontre qu'il est non seulement possible de lier 
n'importe quelle propriete a une donnee externe mais egalement que la donnee 
externe peut elle-meme etre conservee dans n'importe quelle classe d'objet. 



7.3 Lier les donnees sans utiliser 
le code .NET 

Jusque-la, nous avons vu comment lier les controles a un objet mais UNIQUE- 
MENT via le code .NET. II est egalement possible de realiser cette liaison 
directement dans le code XAML. Pour cela, vous disposez de deux outils 
differents. Le Xml DataProvi der pour recuperer les donnees d'une source XML 
ou ObjectDataProvi der pour recuperer les donnees d'un objet. Nous allons en 
premier voir comment recuperer les informations dans la source XML. 

Tout d'abord, nous devons creer un fichier de donnees. Recopiez le code XML 
suivant dans un fichier que vous nommez Data.xml. 

<Table> 

<Name>Di recti on</Name> 
<Records> 
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<Record> 

<Nom>Durant</Nom> 

<Prenom>Loui s</Prenom> 

<Titre>Directeur general </Titre> 
</Record> 
<Record> 

<Nom>Dupont</Nom> 

<Prenom>Leon</Prenom> 

<Titre>Product manager</Titre> 
</Record> 
<Record> 

<Nom>Dijrand</Nom> 

<Prenom>Cari ne</Prenom> 

<Ti tre>Di rectri ce general e adjointe</Titre> 
</Record> 
</Records> 
</Tabl e> 

Ce fichier contient done une simulation de table dont le nom serait Direction 
et qui contient trois enregistrements. La structure de ce fichier XML n'est 
absolument pas une structure obligatoire et n'est reprise qu'a titre d'exemple. 

Une fois ce fichier cree, nous pouvons maintenant realiser notre page XAML 
qui va lire directement ce fichier. Les donnees seront affichees dans une 
ListView. Ce sera pour nous l'occasion de decouvrir ce controle, qui se prete 
particulierement bien a 1'afFichage de donnees enregistrees dans une source 
externe. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nfx/2006/xaml " 

> 

<Grid> 

<Grid.Resources> 

<XmlDataProvider x:Key="data" Source=" Data.XML"/> 
</Grid.Resources> 
<Gri d . DataContext> 

<Binding Source="{StaticResource data}" 
XPath="/Table/Records"/> 
</Grid.DataContext> 

<ListView Height="92" Margin="13,18,19,0" 
Name="MaListView" Vertical Al ignment="Top" 
ItemsSource=" { Bi ndi ng XPath=Record/Nom} " 
</Grid> 
</Page> 
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• XamlPad 



[]Ailto Parse ► Refresh 



izmm 



Duran: 
Dupcnt 
Durand 



<Grid> 

<Grid.Sesources> 

OonlData Provider x:Key="aara" Sour 
<Eata7emplare x:Key="CataLL3tView" 
<Laoel Cor.re:ir=" f3mdina X?ach=r-' 



Done. Markup saved to "C:\Prograrn Rles\Microsoft SDKs 
\Windows\vl.O\Bin\XarnlPad_Saved.xamr. 



< Figure 7-1 1 : 

Affichage du contenu 
d'un fichier XML dans 
une ListView 



Comme vous pouvez le constater, la balise XmlDataProvider est extremement 
simple d' utilisation puisqu'il ne s'agit que de dormer un nom via l'attribut x: Key 
et de definir le fichier en utilisant l'attribut Source. Comme pour les techniques 
precedentes, nous devons utiliser le DataContext. Cette fois, nous le faisons 
directement dans le fichier XAML puisque la source est definie en tant que 
ressource statique. L'attribut XPath va permettre de determiner dans le fichier 
XML le noeud qui contient les donnees qui nous interessent. II ne reste plus 
alors qu'a definir la ListView. En dehors de l'attribut ItemSource, qui permet de 
definir les donnees associees, rien de bien neuf. Notez que, pour definir les 
donnees, nous utilisons a nouveau XPath. Le contenu du noeud Nom inscrit dans 
chaque noeud Record de la source de donnees (DataContext) servira a definir un 
element de la liste. 

Si nous desirons afficher plus d'une information par liste, vous pouvez utiliser 
l'attribut ItemTempl ate de notre ListView. Pour cela, nous devons au prealable 
definir un DataTempl ate. Le DataTempl ate sert a decrire le contenu et la fagon 
de representer chacun des elements de la liste. II se place egalement dans la 
zone des ressources. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 

> 

<Grid> 

<Grid.Resources> 

<XmlDataProvider x:Key="data" Source=" Data.XML"/> 
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<DataTempl ate x:Key="DataLi stView"> 
<WrapPanel> 

<Label Content="{Binding XPath=Nom} "/> 
<Label Content="{Binding XPath=Prenom} "/> 
<Label Content="{Binding XPath=Titre} "/> 
</WrapPanel> 
</DataTempl ate> 
</Grid.Resources> 
<Gri d . DataContext> 

<Binding Source="{StaticResource data}" 
XPath="/Table/Records"/> 
</Grid.DataContext> 

<ListView Height="92" Margin="13,18,19,0" 
Name="MaListView" Vertical Al ignment="Top" 
ItemsSource=" { Bi ndi ng XPath=Record} " 
ItemTemplate="{StaticResoiirce DataListView} "/> 
</Grid> 
</Page> 



• XamlPad QHB 



Auto Parse ► Refresh g> 



Duran: Lcjis Directeur general 
Dupcnt Leon Product manager 
Durand Carine Cirectrice generale adjointe 



<Wrap?anel> 

<La£el :or.-ent = " {Binding Xrath=t 
<Larel :or.-en- = " Binding X=ath=: 
<Label Contenr="{ Binding XPath=l 
</HrapPanel> 
</Data~emplat.e> 



Done, Markup saved tc "C:\Program Files\Microsoft SDKs 
\Windov«\vl.O\Bin\XamlPad_Saved.xaml". 



< Figure 7-12 : 

Affichage d'une 
ListView en utilisant 
un DataTemplate 



eV c\arque 
^* Contenu d'un DataTemplate 

Comme vous pouvez le remarquer, un DataTemplate peut contenir n'importe 



quel code XAML ou presque. 
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Un autre moyen d'afficher plus d' informations est d'utiliser un GridView. Le 
GridView est non pas a proprement parler un autre controle mais plutot une 
extension qui se place dans la propriete View de ListView. II permet d'afficher 
les informations dans des colonnes separees et meme de donner un titre a ces 
colonnes. Si nous reprenons le meme exemple, nous devrons le modifier 
comme suit. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 

> 

<Grid> 

<Grid.Resources> 

<XmlDataProvider x:Key="data" Source=" Data.XML"/> 
</Grid.Resources> 
<Gri d . DataContext> 

<Binding Source="{StaticResource data}" 
XPath="/Table/Records"/> 
</Grid.DataContext> 

<ListView Height="92" Margin="13,18,19,0" 
Name="MaListView" Vertical Al ignment="Top" 
I temsSource="{ Binding XPath=Record}"> 
<ListView.View> 

Dans cet exemple, le GridView contient trois colonnes, une pour le nom, une 
pour le prenom et une pour le titre. 

<GridView Al lowsCol umnReorder="True"> 
<GridViewColumn Header="Nom" 
Width="50" 

Di spl ayMemberBi ndi ng= 

"{Binding XPath=Nom}"/> 
<Gr i dVi ewCol umn Header=" Prenom" 
Width="60" 

Di spl ayMemberBi ndi ng= 

"{Binding XPath=Prenom}"/> 
<GridViewColumn Header="Titre" 
Width="140" 
Di spl ayMemberBi ndi ng= 

"{Binding XPath=Titre} "/> 
</GridView> 
</ListView.View> 
</ListView> 
</Grid> 
</Page> 
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• XamlPad 0H[ IfX | 


| f] Auto Parse | ► Refresh ^> _ _ 










Nom Prenom Trtre 






Dupont Leon Product manager 

Durand Carire Directnce generale adjointe 










Ori'5 I v T ie , A r C2l , Jinr. Header ="?renon" 
^ricTvievCslurir. Header="Titre M 
</GridView> 
< Li5tViev:. Viev:> 
</ListView> 
</Gnd> 
</Psge> 




< 






Done. Markup saved tc "C:\Prograrn Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml". 



< Figure 7-13 : 

Affichage d'un 
GridView 



^uce 

7 Deplacer les colonnes 

Pour permettre a I'utilisateur de deplacer les colonnes par glisser-deposer, vous 
devez assigner la valeur True a I'attribut AllowsColulmnReorder dans la balise 
GridView. 



us 
se 



Si vous preferez dormer un aspect plus structure a votre affichage, vous 
utiliserez probablement un TreeView. Sur la base du meme exemple, nous 
pouvons construire un petit TreeView mais, afin de lui donner un aspect plus 
hierarchise, il y a lieu de modifier au prealable notre source de donnees. 

<Table> 
<Name> 

Direction 
</Name> 
<Records> 

<Admini strati on> 
<Record> 

<Nom>Durant</Nom> 
<Prenom>Loui s</Prenom> 
<Ti tre>Di recteur general </Ti tre> 
</Record> 
<Record> 

<Nom>Durand</Nom> 
<Prenom>Cari ne</Prenom> 
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<Ti tre>Di rectri ce general e adjointe</Titre> 
</Record> 
</Admini strati on> 
<Production> 
<Record> 

<Nom>Dupont</Nom> 
<Prenom>Leon</Prenom> 
<Ti tre>Product manager</Titre> 
</Record> 
</Production> 
</Records> 
</Table> 

Avec les nceuds Administration et Production, les membres de la direction sont 
maintenant groupes selon leurs taches. Nous pouvons representer cette structure 
dans le TreeView. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 

> 

<Grid> 

<Grid.Resources> 

<XmlDataProvider x:Key="data" 
Source="Data2.XML"/> 
<DataTempl ate x:Key="Admin"> 
<WrapPanel> 

<Label Foreground="Bl ue" 
Content=" { Bi ndi ng XPath=Nom} "/> 
<Label Content="{Binding XPath=Prenom} "/> 
<Label Content="{Binding XPath=Titre} "/> 
</WrapPanel> 
</DataTempl ate> 

Nous pouvons definir un deuxieme DataTempl ate sur la meme source. Dans 
l'exemple, seule la couleur est modifiee, mais vous pourriez changer tous les 
elements. 

<DataTempl ate x:Key="Prod"> 
<WrapPanel> 

<Label Foreground="Green" 
Content=" { Bi ndi ng XPath=Nom} "/> 
<Label Content="{Binding XPath=Prenom}"/> 
<Label Content="{Binding XPath=Titre} "/> 
</WrapPanel> 
</DataTempl ate> 
</Grid.Resources> 
<Gr i d . DataContext> 
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<Binding Source="{StaticResource data}" 
XPath="/Table/Records7> 
</Grid.DataContext> 
<TreeView Margin="13,18,19,0" 
Name="MaTreeView" 
Background="Azure"> 
<TreeViewItem 
ItemsSource=" {Binding XPath=Admini strati on/Record}" 
Header="Admini strati on" 
ItemTempl ate=" {Stati cResource Admi n} "/> 
<TreeViewItem 
I temsSource=" {Binding XPath=Producti on/Record} " 
Header="Production" 

ItemTempl ate= " { Stati cResource Prod} "/> 
</TreeView> 
</Grid> 
</Page> 





* £jto Parse ► Refresh -• _ _ 










B Administration 
iS Production 






< ■■■ 3nd.Z'ataCcnte ;■: t > 

<TreeView Margin="13, 19, 19, 0" 
^'ame = " Ma TreeView " 
5ackground= "Azure" > 




< 


j > 




Dene. Markup saved tc "C:\Pr0cr2r Hles'-.Microsoft SDKs 
\Windov«\vl.0\Bin\XamlPad_5aved.xaml". 



•< Figure 7-14 : 

Affichage d'un 
TreeView 



Comme vous pouvez le constater, chaque element du TreeView possede sa 
propre source ou plutot son propre chemin vers les donnees. II peut aussi avoir 
sa propre representation mais, generalement, le modele (DataTempl ate) sera le 
meme pour 1' ensemble des elements. 

Voyons maintenant comment realiser une liaison avec un objet en utilisant 
ObjectDataProvider. 

Nous devons tout d'abord creer une classe. Prenons comme exemple la classe 
Auteur, qui contient son nom et une collection de livres qu'il a ecrits. 
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XamlPad 



| Auto Parse ► Refresh 



BID® 



- Administraticn 

Durant Louis Directeur general 

Durand Carine Cirectrice generale adjointe 
B Production 

Dupont Leon Product manager 



< 3ri i . "ataCcntext> 
<TreeView >!argin="13, 
>rame = " Ma T r e eVi e w " 
5ackgrounct=" Azure" > 



,13,Z 



Done. Markup saved to "C:\Prograrn Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xanl". 



< Figure 7-1 5 : Le 

TreeView ouvert 



Pour cela, il nous faut une classe Livre. 

Public Class Livre 

Private _name As String 
Public Readonly Property NameQ As String 
Get 

Return _name 
End Get 
End Property 



Le nom du livre est initialise dans le constructeur. 



Public Sub New(ByVal name As String) 

_name = name 
End Sub 
End Class 



Ensuite, nous avons besoin d'une collection typee pour stacker les objets 
Livre. 

Public Class Livres 

Inherits ObservableCol lection (Of Livre) 

Public Sub New() 

End Sub 
End Class 
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Nous pouvons maintenant creer la classe Auteur. 

Public Class Auteur 

Private _name As String 
Private _livres As Livres 

Public Readonly Property Name() As String 
Get 

Return _name 
End Get 
End Property 

Public Readonly Property LivresQ As Livres 
Get 

Return livres 
End Get 
End Property 

L' auteur et les livres sont initialises dans le constructeur. 

Public Sub New() 

_name = "Stephen King" 

Jivres = New Livres 

J ivres.Add(New Livre("La tour sombre")) 

Jivres. Add (New Livre("Ca")) 

_l ivres.Add(New Livre("La peau sur les os")) 
End Sub 
End Class 

Maintenant, nous pouvons passer au code XAML et a l'utilisation d'ObjectDa- 
taProvider. La propriete ObjectType va nous permettre de specifier le type 
d'objet qui sera cree. 

^ention ^^^^^^^^^^^^^ 

^ Objet cree dans le code .NET 

ObjectDataProvider ne fait pas la liaison avec un objet existant mais instancie 
un nouvel objet. 

Pour realiser la liaison avec un objet defini dans le code .NET, vous devez utiliser 
la methode vue precedemment. 

Le parametre ConstructorParameters, que nous n'utiliserons pas ici, permet de 
transmettre des parametres au constructeur. Les autres techniques utilisees ont 
deja ete vues precedemment. 
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<Window xmlns= 
"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
xml ns : src="cl r-namespace : Obj ectProvi derExempl e" 

> 

<Window.Resources> 

<ObjectDataProvider x:Key="sk" 
0bjectType=" (x:Type src: Auteur} "/> 
<DataTempl ate x : Key= " NomAuteur "> 

<TextBlock Text=" {Binding Path=Name}" /> 
</DataTemplate> 
</Window.Resources> 
<StackPanel DataContext= 
"{Binding Source={StaticResource sk}}" 
Margin="10,10,10,0"> 
<TextBlock Text="{Binding Path=Name}" 
Background="LightGray" /> 
<ListView Background="LemonChiffon" 
ItemsSource=" { Bi ndi ng Path=Li vres } " 
ItemTemplate="{DynamicResource NomAuteur}" 
/> 

</StackPanel> 
</Wi ndow> 



Stephen King 
La tour sombre 
Ca 

I La penuries os 




Figure 7-16 : 

Binding avec 
ObjectDataProvider 



^arque 

^* ObjectProviderExemple 

ObjectProviderExemple est le nom du projet et done par defaut celui de 
I'assembly. 



de^ 



Les parametres Objectlnstance, MethodName et MethodParameters etendent 
encore les possibilites de cette classe en permettant entre autres Faeces a des 
methodes de l'objet cree. 
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7.4 Checklist 

Dans ce chapitre sur la connexion aux donnees, nous avons essentiellement vu : 

■ comment lier un objet DataSet ou autre avec un controle en utilisant les 
proprietes DataContext et Source ; 

■ comment lier les donnees en utilisant Binding ; 

■ comment lier les donnees a un fichier XML en utilisant Xml DataProvi der ; 

■ comment afficher les donnees dans une ListView ou de maniere plus 
elaboree avec un GridView ; 

■ comment afficher les donnees dans une arborescence avec Tree View ; 

■ comment lier les donnees a un objet en utilisant ObjectDataProvi der. 
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Fonctionnalites avancees 

V 



8.1 Appliquer des transformations 
sur les controles 

XAML nous offre quelques possibilites pour manipuler la disposition des 
controles. Nous n'entrerons pas dans les details. Toutefois, au travers des 
quelques exemples presentes dans ce chapitre et si vous avez un jour besoin 
d'une telle fonctionnalite, vous devriez pouvoir facilement trouver les parame- 
tres qui vous conviennent. 

Comme premier exemple, nous allons effectuer une rotation sur une etiquette. 



^^g^-Pour V exemple, reprenons Vetiquette definie page 28. 
Renvoi 



<Label Name="l bl Premier-Label " 




HorizontalAl ignment=" Center" VerticalAl ignment= 


"Center" 


FontFamily="Verdana" FontSize="14" FontWeight= 


Heavy" 


FontStyle="Ital ic" FontStretch="Ul traExpanded" 




Foreground="Aquamarine" Background="Blue"> 




Mon premi er I abel . 




<Label .RenderTransform> 




<RotateTransform Angle="270" /> 




</Label .RenderTransform> 




</Label> 






Figure 8-1 : Une etiquette verticale 



^arque 

^ Acceder a une propriete grace a un noeud fils 

Pour la premiere fois, nous utilisons une propriete de la classe non pas en 
definissant grace a un attribut mais bien comme un noeud fils de notre nceud 
Label . 



jd 



220 • Le guide du codeur 



Appliquer des transformations sur les contrdles 



rt\araue 



II est egalement possible de realiser une modification d'echelle. 



<Label Name="l bl PremierLabel " 




Hon' zontal Al i gnment="Center" Verti cal Al i gnment= 


"Center" 


FontFamily="Verdana" FontSize="14" FontWeight=' 


Heavy" 


FontStyle="Ital ic" FontStretch="Ul traExpanded" 




Foreground= "Aquamarine" Background="Blue"> 




Mon premi er 1 abel . 




<Label .RenderTransform> 




<ScaleTransform CenterY="20" ScaleX="l" 


ScaleY="7" /> 


</Label .RenderTransform> 


</Label> 






Notez la presence de l'attribut CenterY, qui comme CenterX permet de modifier 
la position du controle en meme temps que lui est appliquee la transformation. 




Figure 8-2 : Une 

etiquette etiree 



Nous pouvons aussi adapter l'oblicite sur deux axes. 
<Label Name="lbl PremierLabel" 

Hon' zontal Al i gnment="Center" Verti cal Al i gnment=" Center" 
FontFamily="Verdana" FontSize="14" FontWeight="Heavy" 
FontStyle="Ital ic" FontStretch="Ul traExpanded" 
Foreground= "Aquamarine" Background="Blue"> 
Mon premi er 1 abel . 
<Label .RenderTransform> 

<SkewTransform AngleX="45" AngleY="20" /> 
</Label .RenderTransform> 
</Label> 
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| f j Auto Parse" t ► Refresh 




<Faje 

xmln3="htrp: ' /schemaa .microsoft . ocm/vinfx/avalc 
xmlna :x="httF* ' fin IHIMII ■lllllimri l < MTW 1 II fl T w !!■ 
<Lafcel Kame="lfclFreraierIatel" 
HorizcntalAlignmer.r="Center" VerricalAlignmenc* v 

■■■■■il 



Done. Markup saved to C:\Program Rles\Microsoft 5DKs\Windows\vl.O 
\Bin\XamlPad_5aved.xaml, 



< Figure 8-3 : Une 

etiquette en 3D 



Si vous ne trouvez pas votre bonheur dans ces transformations, vous pouvez 
toujours utiliser une transformation grace a une matrice. 

<Label Name="l bl PremierLabel " 

Horizontal Al ignment="Center" VerticalAl ignment="Center" 

FontFamily="Verdana" FontSize="14" FontWeight="Heavy" 

FontStyle="Ital ic" FontStretch="Ul traExpanded" 

Foreground="Aquamarine" Background="Blue" 

RenderTransf orm= " 1 , -0 . 5 ,0 , 1 , 0, 0"> 
Mon premi er 1 abel . 
</Label> 

Nous revenons avec cette commande dans la structure plus traditionnelle d'un 
attribut de notre balise. 

Chaque chiffre de la matrice applique une transformation a notre label. 



QUI® 




< Figure 8-4 : Une 

etiquette oblique 



A vous de decouvrir le resultat obtenu en modifiant chacun des parametres. 
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Les transformations appliquees precedemment sur un Label peuvent parfaite- 
ment etre utilisees avec d'autres controles. Par exemple, l'effet sur un texte long 
est, pour qui a l'habitude des limites de l'API Win32, toujours tres surprenant. 

<TextBlock Name="blckTexte" 
MaxWidth="200" MaxHeight="70" 
TextWrappi ng="Wrap" TextTrimmi ng="WordEl 1 i psi s" 
Margin="5,5,5,5" TextAl ignment="Justify" > 
Nous sonmes maintenant arrives a notre deuxieme control e. 
Comme vous avez deja pu le constater, XAML est a la fois 
simple d 1 utilisation et performant. 
<TextBlock.RenderTransform> 

<RotateTransform CenterX="100" CenterY="100" 
Angle="270"/> 
</TextBlock.RenderTransform> 
</TextBlock> 




Max/riarh="2C : " XaxKeigh*-"70" 
TexrWraFpinr="Wrap" TextTrinrai: 
Margin="5, 5, 5, 5" Tex*Alignment= 
Ncua scnanes na:n:enan: arrivs 
Ccnane vcus avez de;a pu le cc 
simple d'-jrilieatior. et perfc 



Done. Markup saved to C:\Program Files 
\Mkrosoft SDKs\Windows\vl.O\Bin 
\XamlPad_5aved.xaml. 



Figure 8-5 : Un 

bloc de texte vertical 



8.2 Creer une ressource 

Une ressource en XAML est un element que vous codez afin qu'il soit reutilise 
au sein du conteneur dans lequel elle est definie. L'utilite de la ressource est de 
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pouvoir reutiliser le code sans devoir le reecrire completement. Ce qui permet 
un gain de temps mais aussi limite les risques de bug ou d'oubli en cas de 
modification. 

Prenons un exemple simple de ressource. 

<Page 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x= " http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<Page.Resources> 

<Sol idColorBrush Color="Gold" x:Key="Backgroundl"/> 
<Sol idColorBrush Color="Lavender" x:Key="Background2"/> 
</Page.Resources> 
<StackPanel> 

<TextBox Background="{StaticResource Backgroundl} "/> 
<TextBox Background="{StaticResource Background2} "/> 
<TextBox Background="{StaticResource Backgroundl} "/> 
<TextBox Background="{StaticResource Backgroundl} "/> 
<TextBox Background="{StaticResource Background2} "/> 
</StackPanel> 
</Page> 



% XamlPad 



-lln x| 



</Pa3e.?.e32urce3> 

<StscManei> 

<Tex-Bcx Backgrcu^d»"{S^aticRej 
<Text5cx BadcgtpvndB*{5tatleBec 
<TextBox Back-grcund="{SraricRes 
<Texr5cx Bac1(groand^*(3t*tlcHeg 



Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



Figure 8-6 

Utiliser des 
ressources 



Le nom de la ressource est defini grace a l'attribut x :key. La ressource est 
accedee en assignat {StaticResource NomDeLaRessource} a l'attribut cible. 

Si vous changez la ressource, toute la page est directement affectee. II n'est pas 
necessaire de modifier chaque controle. 
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<Page.Resources> 

<Sol idColorBrush Color="Red" x:Key="Backgroundl"/> 

<Sol idColorBrush Color="Blue" x:Key="Background2"/> 

</Page.Resources> 



% XamlPad 



| [J Auto Parse j ► Refresh 



= : \=:.a = .rr.i : r : f : it . : :: 



xn_n3 : x= n 

<Fage .Rescurce3> 

<SQlidColcr3rush Colcr="Rea" 
<SolidColcr3rush Color""Bloe" 

</Paae-Besaurce9> 



Dune Market: i-=.e- tc C:''.-'cg r an F es'.'-'icre-i-j^t 5_ 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



Figure 8-7 : 

Ressources modifiees 



Nous avons utilise les ressources de maniere statique, il est toutefois possible 
de les utiliser de maniere dynamique en remplacant le mot cle Stati cResource 
par Dynami cResource. Cette possibility n'est interessante que quand la ressource 
peut etre modifiee. Elle pourra alors etre rechargee. 

II est possible d'avoir deux ressources portant le meme nom pour autant 
qu'elles ne soient pas definies dans la meme balise. Pour retrouver une 
ressource, XAML remonte niveau apres niveau a la recherche de cette 
ressource. Pour la lisibilite du code, il est malgre tout fortement conseille 
d'utiliser des noms differents. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<Page.Resources> 
<Sol idColorBrush Color="Red" x:Key="Backgroundl"/> 
<Sol idColorBrush Color="Blue" x:Key="Background2"/> 
</Page.Resources> 
<StackPanel> 

<StackPanel .Resources> 

<Sol idColorBrush Col or=" Lavender" 
x:Key="Backgroundl"/> 
</StackPanel .Resources> 
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<TextBox Background 1 
<TextBox Background 1 
<TextBox Background 1 
<TextBox Background 1 
<TextBox Background 1 
</StackPanel> 
</Page> 



{StaticResource Background].} "/> 

{StaticResource Background2} "/> 

{StaticResource Background!.} "/> 

{StaticResource Backgroundl} "/> 

{StaticResource Background2} "/> 



• XamlPad |7]fn)fx] 



|> Auto Parse > Refresh , , 



<Fage 

xmln3:x-"ht-p: //achemaa.xicroscfT. cci 
<Fage . Rescurces> 

<S:lidC:lc::3::u3h rol=r="Red" 
<SolidCclcr3rush Colcr="Eiu»" > 



Done. Markup saved to C:\Program Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xarnl. 



< Figure 8-8 : 

Ressources de meme 
nom 



Les ressources sont aussi un moyen simple pour partager un menu contextuel 
entre plusieurs elements. 

<Window.Resources> 

<ContextMenu x:Key="CtxtMnu"> 
<MenuItem Header="Copier"/> 
<MenuItem Header="Coller"/> 
</ContextMenu> 
</Window.Resources> 

<TextBox Name="txtNom" Canvas. Top="10" 

Canvas. Left="80" Width="150" MaxLength="30" 

CharacterCasing="Upper" 

Text =" {Binding Path=Nom}" 

ContextMenu=" {StaticResource CtxtMnu}" /> 
<Label Name="l bl Prenom" Canvas. Top="10" 

Canvas. Left="240"> 

Prenom 
</Label> 

<TextBox Name="txtPrenom" Canvas. Top="10" 
Canvas. Left="300" Width="130" MaxLength="30" 
Text =" {Binding Path=Prenom}" 
ContextMenu=" {StaticResource CtxtMnu} "/> 
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8.3 Creer un style 

Les styles vont permettre de modifier l'apparence des controles, et cela sans 
repeter les modifications pour chaque controle individuellement. 

Prenons un exemple simple. La couleur du fond des boites de texte ne vous 
convient pas. Bien sur, vous pouvez changer cette couleur avec l'attribut 
Background sur chaque TextBox mais aussi utiliser un style. 

Un style est defini comme ressource d'un conteneur. Nous choisirons de le 
placer comme ressource de la fenetre. 

<Window.Resources> 

<Style x:Key="MyTextBox"> 

<Setter Property= "TextBox. Background" Value="Gold"/> 

</Style> 
</Wi ndow. Resources> 

Si nous analysons ce code, la premiere chose a faire est de donner un nom a ce 
style avec l'attribut x:Key. La balise Setter va nous permettre de definir la 
propriete affectee. 

II ne nous reste qu'a demander l'utilisation du style. Cela se fait pour chaque 
controle car vous pourriez avoir plusieurs styles differents pouvant etre 
appliques au meme type de controle. 

Pour appliquer un style, il suffit d"utiliser l'attribut Style. 

<TextBox Name="txtNom" Canvas. Top="10" 
Canvas. Left="80" Width="150" MaxLength="30" 
CharacterCasing="Upper" Text ="{Binding Path=Nom}" 
Styl e=" {Stati cResource My TextBox} "> 

Faites de meme avec les autres boites de texte. 
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▲ Figure 8-9 : Mon premier style 
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^ention ^^^^^^^^^^^^^^^^^^^^^^^^ 

^" Affichage du style 

Le style tel que nous I'avons defini n'affecte le controle que lorsqu'il est active 
Son apparence desactivee n'a pas change. Pour voir les couleurs, vous devez 
done utiliser I'option Ouvrir du menu. 



e^^ 



Bien sur, vous pouvez retorquer qu'il a fallu modifier toutes les TextBox et que, 
des lors, il aurait ete aussi simple de changer l'attribut correspondant. Toutefois, 
si vous desirez maintenant changer la couleur, il suffit de la changer a un 
endroit. Changeons la couleur. 

<Style x:Key="MyTextBox"> 

<Setter Property= "TextBox. Background" Val ue=" Lavender" /> 
</Style> 



□UK 
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▲ Figure 8-10 : Changement rapide 

Toutes les boites de texte concernees sont automatiquement adaptees. 

Si vous trouvez toujours qu'il est fastidieux de declarer le style pour chaque 
controle, il est egalement possible d'appliquer automatiquement un style a tous 
les controles d'un meme type sans devoir le preciser pour chacun d'eux. 

<Style TargetType=" {x:Type TextBox} "> 

<Setter Property= "TextBox. Background" Val ue=" Lavender" /> 
</Style> 



L'attribut TargetType permet de definir le type de controle qui doit etre affecte. 

Une autre bonne raison d'utiliser un style est qu'il peut regrouper non pas une 
mais un ensemble de modifications a apporter a la presentation. Et, dans ce cas, 
il sera beaucoup plus fastidieux de les realiser pour chaque controle concerne. 

<Style x:Key="MyTextBox"> 

<Setter Property= "TextBox. Background" Val ue="Lavender"/> 
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<Setter Property="TextBox.BorderBrush" Value="Blue"/> 
<Setter Property="TextBox.BorderThickness" Value="2"/> 
</Style> 
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▲ Figure 8-11 : Changements multiples 
Vous pouvez aussi avoir des changements complexes. 

<Style x:Key="MyTextBox"> 

<Setter Property= "TextBox . Background'^ 
<Setter.Value> 

<LinearGradientBrush StartPoint="0,0" EndPoint="l,l"> 
<Li nearGradi entBrush . Gradi entStops> 

<GradientStop Color="LavenderBlush" Offset="0" /> 
<GradientStop Color="Lavender" 0ffset="0.25" /> 
<GradientStop Color="Gray" 0ffset="0.75" /> 
<GradientStop Color="SlateGray" Offset="l" /> 
</Li nearGradi entBrush .Gradi entStops> 
</Li nearGradi entBrush> 
</Setter.Value> 
</Setter> 

<Setter Property= "TextBox. BorderBrush" Val ue="Gray"/> 
<Setter Property="TextBox.BorderThickness" Value="l"/> 
</Style> 
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▲ Figure 8-1 2 : Style complexe 
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Comme vous pouvez le constater, il est possible de pousser tres loin les 
modifications de presentation. 

Une fois encore, nous pouvons voir qu'on peut acceder a une propriete comme 
a un attribut. 

<Setter Property="TextBox.BorderBrush" Value="Gray" /> 

Ou comme a un noeud fils. 

<Setter Property="TextBox . Background'^ 

<Setter.Value> 

</Setter.Value> 
</Setter> 

Une petite explication s'impose sur la classe LinearGradientBrush, que nous 
n'avons pas encore utilisee. Comme vous avez pu le constater, elle permet de 
realiser un fondu lineaire entre plusieurs couleurs. Le fondu se fait sur la 
diagonale entre le coin superieur gauche (coordonnees 0,0) et le coin inferieur 
droit (coordonnees 1,1). Les attributs SartPoint et EndPoint definissent le debut 
et la fin de la zone ou doit s'appliquer le fondu. La collection GradientStops 
permet de definir les couleurs et leurs positions sur la diagonale. 

Vous pouvez egalement preferer un fondu radial en utilisant la classe Radial - 
GradientBrush.. 

<Style x:Key="MyTextBox"> 

<Setter Property= "TextBox . Background'^ 
<Setter.Value> 

<Radi al Gradi entBrush> 

<Radi al Gradi entBrush .Gradi entStops> 
<Gradi entStop Col or= " LavenderBl ush" 
Offset="0" /> 

<GradientStop Col or=" Lavender" 
0ffset="0.2" /> 

<Gradi entStop Col or= " Li ghtGray " 
0ffset="0.5" /> 

<GradientStop Color="Gray" 0ffset="l" /> 
</Radi al Gradi entBrush . Gradi entStops> 
</Radi al Gradi entBrush> 
</Setter.Value> 
</Setter> 

<Setter Property= "TextBox. BorderBrush" Value="Black"/> 
<Setter Property="TextBox.BorderThickness" Value="l"/> 
<Setter Property= "TextBox . TextAl i gnment " 
Value="Center"/> 
</Style> 
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▲ Figure 8-13 : Fondu radial 
Un autre avantage des styles est qu'il est possible d'heriter d'un autre style. 

<Window.Resources> 

<Style x:Key="MyControl "> 

<Setter Property= "Control .Background'^ 
<Setter.Val ue> 

<Radi al Gradi entBrush> 

<Radi al Gradi entBrush .Gradi entStops> 
<GradientStop Col or="LavenderBl ush" 
Offset="0" /> 

<GradientStop Color="Lavender" 
0ffset="0.2" /> 

<GradientStop Color="LightGray" 
0ffset="0.5" /> 

<GradientStop Color="Gray" 0ffset="l" /> 
</Radi al Gradi entBrush .Gradi entStops> 
</Radi al Gradi entBrush> 
</Setter.Value> 
</Setter> 

<Setter Property= "Control .BorderBrush" Value="Black"/> 
<Setter Property= "Control .BorderThickness" Value="l"/> 
</Style> 

<Style TargetType="{x:Type TextBox}" x:Key="MyTextBox" 
BasedOn=" {Stati cResource MyControl } "> 
<Setter Property= "TextBox . TextAl i gnment " 
Value="Center"/> 
</Style> 

<Style TargetType="{x:Type ListBox}" x:Key="MyListBox" 
BasedOn=" {Stati cResource MyControl } "/> 
</Wi ndow. Resources> 
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▲ Figure 8-14 : Heritage de style 

Dans cet exemple, le style que nous avions defini est maintenant applicable au 
type Control. Le style peut etre herite par les autres styles destines a d'autres 
controles. La propriete TextAl ignment n'est modifiee que pour le style MyText- 
Box. 



Redefinition d'un element d'un style 



les^ 



Si votre style herite d'un autre, vous pouvez sans probleme redefinir des 
attributs deja definis. 



Un autre attribut important et souvent utilise en conjonction avec les styles est 
l'attribut Template. 

Si vous ne souhaitez changer l'attribut Template que pour un seul controle de 
votre ecran, il est inutile de creer un style. Vous pouvez modifier cette propriete 
directement dans la balise du controle. Nous allons commencer en modifiant 
l'attribut Template du nom et nous creerons ensuite un style sur cette base. De 
cette facon, nous aurons utilise les deux possibilites. 

<TextBox Name="txtl\lom" Canvas. Top="10" Canvas. Left="80" 
Width="150" Maxl_ength="30" CharacterCasing="Upper" 
Text ="{ Binding Path=Nom}" 

> 

<Text Box . Tempi ate> 

<Control Tempi ate> 

<Border CornerRadius="10" BorderThickness="l" 
BorderBrush="Black"> 
<Border . Bac kground> 
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<Radi al Gradi entBrush> 

<Radi al Gradi entBrush . Gradi entStops> 
<GradientStop Color="LavenderBl ush" 
Offset="0" /> 

<GradientStop Col or=" Lavender" 
0ffset="0.2" /> 

<GradientStop Color="LightGray" 
0ffset="0.5" /> 
<GradientStop Color="Gray" 
Offset="l" /> 
</Radi al Gradi entBrush . Gradi entStops> 
</Radi al Gradi entBrush> 
</Border.Background> 

<Scrol 1 Vi ewer x : Name= " PART_Conten tHost " 
Focusable=" False" 
Hori zontal Al i gnment="Center"/> 
</Border> 

</Control Tempi ate> 

</TextBox. Tempi ate> 

<TextBox . ContextMenu> 
<ContextMenu> 

<MenuItem Header="Copier"/> 
<MenuItem Header="Coller"/> 
</ContextMenu> 
</TextBox . ContextMenu> 
</TextBox> 
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A Figure 8-1 5 : Modification de la representation d'une TextBox 

Dans l'exemple, nous avons remplace la representation normale par une 
bordure arrondie avec les memes effets de fondu que le controle original, mais 
les coins sont arrondis. La valeur est contenue dans un Scroll View. Ceci est 
rendu possible grace a la presence de l'attribut x:Name="PART_ContentHost". 
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En utilisant cet attribut, il est possible de faire quasiment tout mais aussi 
n'importe quoi. 

<Label Name="lbll\lom" Canvas. Top="10" 
Canvas. Left="10"> 
Norn 

<Label .Tempi ate> 
<Control Tempi ate> 
<CheckBox> 

<ContentPresenter 

x:Name="ContentSite" /> 
</CheckBox> 
</Control Tempi ate> 
</Label . Tempi ate> 
</Label> 
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▲ Figure 8-1 B : Representor un label par une case a cocher 

Dans l'exemple ci-dessus, la representation du controle Label est remplacee par 
celle du controle CheckBox. Toutefois, il s'agit toujours d'un objet Label. Les 
proprietes de CheckBox comme IsChecked ne sont pas accessibles. Ce genre de 
remplacement n'a aucun interet mais demontre bien la dissociation faite entre 
l'objet et sa representation. 

Ce qu'il est possible de realiser sur un controle a contenu simple, il est 
egalement possible de le realiser pour un controle gerant une liste comme la 
ListBox utilisee dans l'exemple. 



<ListBox Name="l stPays" Canvas. Top= 
Canvas. Left="200" 
DisplayMemberPath="Pays" 
Sel ectedVal ue=" {Bi ndi ng Path=Pays} " 
SelectedValuePath="Id"> 
<ListBox.Template> 



'100" 
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<Control Tempi ate> 

<Border CornerRadius="10" BorderThickness="l" 
BorderBrush="Black" > 
<Border . Bac kground> 
<Radi al Gradi entBrush> 

<Radi al Gradi ent Brush . Gradi entStops> 
<Gradi entStop Col or=" LavenderBl ush " 
Offset="0" /> 

<GradientStop Col or=" Lavender" 
0ffset="0.2" /> 

<GradientStop Color="LightGray" 
0ffset="0.5" /> 

<GradientStop Color="Gray" Offset="l" /> 
</Radi al Gradi entBrush . Gradi entStops> 
</Radi al Gradi entBriish> 
</Border.Background> 
<Scroll Viewer 

Focusable=" False" 

Hon' zontal Al i gnment="Center"> 

<ItemsPresenter/> 
</ScrollViewer> 
</Border> 
</Control Tempi ate> 
</Li stBox. Tempi ate> 
</ListBox> 
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▲ Figure 8-1 7 : Adapter la ListBox pour respecter le style des TextBox 

Maintenant que nous avons vu comment modifier la representation d'un 
controle, voyons comment inclure cela dans un style. 

<Window.Resources> 
<Style x: Key="MyTextBox"> 
<Setter Property= "Tempi ate"> 
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<Setter.Value> 
<Control Tempi ate> 
<Border CornerRadius="10" BorderThickness="l" 
BorderBrush="Bl ack"> 
<Border . Bac kground> 
<Radi al Gradi entBrush> 
<Radi al Gradi entBrush .Gradi entStops> 
<Gradi entStop Col or=" LavenderBl ush " 
Offset="0" /> 

<GradientStop Color="Lavender" 
0ffset="0.2" /> 

<Gradi entStop Col or=" Li ghtGray " 
0ffset="0.5" /> 
<Gradi entStop Color="Gray" 
Offset="l" /> 
</Radi al Gradi entBrush . Gradi entStops> 
</Radi al Gradi entBrush> 
</Border.Background> 

<ScrollViewer x:Name="PART_ContentHost" 
Focusable=" False" 
Horizontal Al ignment="Center"/> 
</Border> 
</Control Tempi ate> 
</Setter.Value> 
</Setter> 
</Styl e> 
</Window.Resources> 
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▲ Figure 8-18 : La modification de la representation dans le style 



En definitive, c'est tres simple. II suffit d'appliquer ce que nous avons vu en 
debut de chapitre mais sur l'attribut Template. 

II est egalement possible d'utiliser des ressources dans un style. La ressource 
doit bien entendu etre definie avant le style. 
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<Window.Resources> 

<Radi al Gradi ent Brush x : Key= " Fondu"> 
<Radi al Gradi entBrush . Gradi entStops> 

<GradientStop Color="LavenderBlush" Offset="0" /> 
<GradientStop Col or=" Lavender" 0ffset="0.2" /> 
<GradientStop Color="LightGray" 0ffset="0.5" /> 
<GradientStop Color="Gray" Offset="l" /> 
</Radi al Gradi entBrush . Gradi entStops> 
</Radi al Gradi entBrush> 

<Style x:Key="MyTextBox"> 

<Setter Property= "TextBox . Tempi ate"> 
<Setter.Val ue> 
<Control Tempi ate> 

<Border CornerRadius="10" BorderThickness="l" 
BorderBrush="Black" 
Background="{StaticResource Fondu} "> 
<Scrol 1 Vi ewer x : Name=" PART_ContentHost " 
Focusable="False" 
Horizontal Al ignment="Center"/> 
</Border> 
</Control Tempi ate> 
</Setter.Value> 
</Setter> 
</Style> 
</Wi ndow. Resources> 

La meme ressource peut alors etre egalement utilisee dans la Li stBox. 

<ListBox Name="lstPays" Canvas. Top=" 100" 
Canvas. Left="200" 
Di spl ayMemberPath="NomPays" 
Sel ectedVal ue=" {Bi ndi ng Path=Pays} " 
SelectedValuePath="Id"> 
<Li stBox. Tempi ate> 
<Control Tempi ate> 

<Border CornerRadius="10" BorderThickness="l" 
BorderBrush="Black" 
Background^ 1 {StaticResource Fondu}" > 
<Scroll Viewer 
Focusable=" False" 
Hon' zontal Al i gnment="Center"> 

<ItemsPresenter/> 
</ScrollViewer> 
</Border> 
</Control Tempi ate> 
</Li stBox. Tempi ate> 
</ListBox> 
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Utiliser les triggers 

Les triggers, en francais declencheurs, permettent de definir une action qui sera 
declenchee quand certaines conditions seront rencontrees ou lorsqu'un evene- 
ment survient. Bien que le mecanisme soit different, on peut comparer les 
declencheurs XAML et les evenements .NET, qui ont finalement un objectif 
similaire. 



^arque 

Utilisation du terme trigger plutot que declencheur 

Le terme declencheur etant fort peu usite par les developpeurs, nous utilise- 
rons dans la suite de ce chapitre le terme anglais trigger. II est frequent en 
informatique d'utiliser les termes anglais plutot que francais car ils sont tres 
proches des langages de programmation, et I'analogie entre langage parle et 
langage de programmation delimite precisement et directement le sens du mot 
au contexte specifique. 



Les triggers vont nous permettre de generer un certain dynamisme de nos 
ecrans sans recourir au code .NET. Les triggers peuvent etre declenches lors de 
la modification de valeurs des proprietes des objets ou associes aux evenements 
d'un objet. 

Les triggers sont generalement integres dans des styles. Modifions le style de 
notre exemple precedent pour souligner le champ actif. 

<Window.Resources> 

<Radi al Gradi ent Brush x : Key= " Fondu"> 
<Radi al Gradi entBrush . Gradi entStops> 

<GradientStop Color="LavenderBlush" Offset="0" /> 
<GradientStop Col or=" Lavender" 0ffset="0.2" /> 
<GradientStop Color="LightGray" 0ffset="0.5" /> 
<GradientStop Color="Gray" Offset="l" /> 
</Radi al Gradi entBrush . Gradi entStops> 
</Radi al Gradi entBrush> 

<Radi al Gradi entBrush x : Key= " FonduBl eu"> 
<Radi al Gradi entBrush . Gradi entStops> 

<GradientStop Color="LightBlue" Offset="0" /> 
<GradientStop Color="MediumBlue" 0ffset="0.5" /> 
<GradientStop Color="Blue" 0ffset="0.7" /> 
<GradientStop Color="DarkBlue" Offset="l" /> 
</Radi al Gradi entBrush . Gradi entStops> 
</Radi al Gradi entBrush> 



<Style x:Key="MyTextBox"> 

<Setter Property= "TextBox . Tempi ate"> 
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<Setter.Val ue> 
<Control Tempi ate> 

<Border CornerRadius="10" BorderThickness="l" 
BorderBrush= " Bl ack " x : Name= " Zone" 
Background^ 1 {StaticResource Fondu} "> 
<Scrol 1 Viewer x:Name="PART_ContentHost" 
Focusable="False" 
Horizontal Al ignment="Center"/> 
</Border> 

<Control Tempi ate. Tri ggers> 

<Trigger Property="IsFocused" 
Val ue="true"> 
<Setter TargetName="Zone" 
Property = " Bac kg round " 
Value="{StaticResource FonduBleu}" /> 
</Trigger> 
</Cont rol Tempi ate . Tri ggers> 
</Control Tempi ate> 
</Setter.Value> 
</Setter> 
</Styl e> 
</Wi ndow. Resources> 
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▲ Figure 8-19 : Trigger pour souligner le champ actif 



Si nous analysons les changements, nous retrouvons d'abord l'ajout d'une 
nouvelle ressource semblable a notre ressource Fondu mais avec des couleurs 
bleues. Ensuite, dans le style proprement dit, une nouvelle balise (Control Tem- 
pi ate. Triggers) a fait son apparition. C'est dans cette balise que nous allons 
definir tous les triggers dont nous aurons besoin. Chaque trigger est defini au 
moyen de la balise Trigger. L'attribut Property determine la propriete a 
laquelle le trigger est associe. L'attribut Value determine quant a lui la valeur 
que doit avoir la propriete pour que le trigger s'execute. II s'agit en fait d'une 
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condition simple sur la valeur de la propriete. Les actions a realiser sont placees 
a l'interieur de ce noeud. 



^arque 

^* Le terme Template 

Comme trigger, le terme anglais template esttres souvent privilegie par rapport 
a sa traduction francaise, qui surtout dans ce contexte rend mal le concept 
sous-jacent. C'est pourquoi nous utiliserons ce terme, qui est de plus utilise tel 
quel comme propriete dans XAML. 



La traduction habituelle du terme template est modele. Toutefois, dans le 
contexte qui nous occupe, il s'agit de la definition de la forme que doit prendre 
un controle en utilisant le langage de description XAML lui-meme. C'est par 
l'utilisation des template que XAML fait la distinction entre le contenu d'un 
controle (la definition de la classe) et sa representation a l'ecran. Le terme 
modele prend malgre tout tout son sens si Ton considere que le controle sera 
presente selon le modele que vous definissez. 



^ention 

▼ Nommage des elements constituant le template 

Pour pouvoir dans le trigger influencer les differents composants participant 
la realisation du template, chaque element, ou du moins ceux sur lesquels u 
action doit etre realisee, doit etre nomme au moyen de la propriete x:Name 



t a 
me 

J 



Pour appliquer un trigger a un controle unique, la technique est fort similaire. 
Nous pouvons appliquer la meme technique pour la Li stBox de notre exemple. 



<ListBox Name="l stPays" Canvas. Top="100" 
Canvas. Left="200" 
DisplayMemberPath="NomPays" 
Sel ectedVal ue=" {Bi ndi ng Path=Pays} " 
SelectedValuePath="Id"> 
<Li stBox. Tempi ate> 
<Control Tempi ate> 

<Border x:Name="Zone" CornerRadius="10" 
BorderThickness="l" BorderBrush="Black" 
Background=" {Stati cResource Fondu} "> 
<Scroll Viewer 
Focusable=" False" 
HorizontalAl ignment="Center"> 

<ItemsPresenter/> 
</Scrol 1 Viewer> 
</Border> 
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<Control Tempi ate . Tri ggers> 
<Trigger 
Property= " I sMouseOver" 
Value="true"> 
<Setter 

TargetName="Zone" 
Property="Background" 
Value="{StaticResource FonduBleu}" /> 
</Trigger> 
</Control Tempi ate . Tri ggers> 
</Control Tempi ate> 
</Li stBox. Tempi ate> 
</ListBox> 



■ Les menus avec XAML 


BUB 


Rchier Edition Aide 


_i • Par nom 





Cede postal ^ 54210 j Localite ( 

Pays 



Pont sur Charme 2 



Micro Application 2006 



A Figure 8-20 : Trigger sur une ListBox. 

La technique utilisee est identique a celle mise en ceuvre dans l'exemple 
precedent. 



^arque 

^* Trigger sur la presence du curseur de la souris 

lei, au lieu d'associer le trigger a la propriete IsFocused, il est associe a 
propriete IsMouseOver. 



■J 



Creer une animation 

Pour realiser des animations, XAML met a notre disposition la balise Story- 
board. Cette balise trouve tout naturellement sa place au sein d'un trigger. La 
balise Storyboard va nous permettre de gerer les actions que nous aurons 
regroupees en son sein. Les animations sont realisees en faisant varier les 
proprietes de l'objet a animer. Ce sont les balises Animation qui vont nous 
permettre de les modifier. Vous devrez utiliser la balise Animation associee au 
type de la propriete que vous voulez modifier, par exemple ByteAnimation ou 
Int32Animation. 
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Prenons un exemple simple, un controle de type Border qui s'ouvre lors de 
l'affichage de la fenetre. Pour y arriver, nous allons definir un trigger sur 
l'evenement Loaded du controle. 

0^^^Pour en savoir plus sur la maniere de creer un trigger, reportez-vous 
Renvoi au chapitre Utiliser les Triggers page _Ref 13324499 1109. 

<Page xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml "> 
<StackPanel Margin="20"> 
<Border Name=" Carre" 
Width="10" 
Height="10" 
Background="Bl ue"> 
<Border.Triggers> 

<EventTrigger RoutedEvent="Border. Loaded"> 
<Begi nStoryboard> 
<Storyboard> 

<DoubleAnimation 
Storyboard.TargetProperty="Width" 
From="10" To="200" Duration="0:0:2"/> 
<DoubleAnimation 
Storyboard . Target Property = " Hei ght " 
From="10" To="200" Duration="0:0:2"/> 
</Storyboard> 
</Begi nStoryboard> 
</EventTrigger> 
</Border.Triggers> 
</Border> 
</StackPanel> 
</Page> 

Le trigger contient une balise BeginStoryboard qui elle-meme contient une 
balise Storyboard. C'est dans cette derniere qu'est definie l'animation. Elle 
consiste a modifier la largeur et la hauteur du cadre. Celui-ci va varier de la 
taille 10 a 200 en l'espace de 2 secondes. Dans cet exemple, les animations 
agissent sur le controle dans lequel elles sont definies. Vous aurez probablement 
besoin d'animer plusieurs controles lors d'un meme evenement. Cela est 
possible en specifiant l'attribut Storyboard. TargetName. Pour une animation 
lors de l'ouverture de la fenetre, l'ideal est d'associer l'animation a l'evenement 
Page. Loaded et non a Border. Loaded. 

<Page xmlns= 

"http: //schemas .mi crosof t .com/wi nfx/2006/xaml /presentati on" 
xmlns:x=" http: //schemas. mi crosoft.com/winfx/2006/xaml "> 
<Page.Triggers> 

<EventTrigger RoutedEvent="Page.Loaded"> 
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<BeginStoryboard> 
<Storyboard> 

<DoubleAnimation 

Storyboard . TargetName= "Carre " 
Storyboard.TargetProperty="Width" 
From="10" To="200" Duration="0:0:2"/> 
<DoubleAnimation 
Storyboard . TargetName= "Carre " 
Storyboard. TargetProperty="Height" 
From="10" To="200" Duration="0:0:2"/> 
</Storyboard> 
</Begi nStoryboard> 
</EventTrigger> 
</Page.Triggers> 
<StackPanel Margin="20"> 
<Border Name=" Carre" 
Width="10" Height="10" 
Background="Blue"/> 
</StackPanel> 
</Page> 



^ention ^^^^^^^^^^^^^^^^^^^^^^^^^ 

7* Animations simultanees 

Les animations definies dans la balise Storyboard sont executees simultane 
ment et non successivement. 



Cet exemple est finalement assez simple car la transformation modifie direc- 
tement la valeur de la propriete de l'objet. Ce n'est malheureusement pas 
toujours le cas. Pour modifier la couleur du fond, nous ne pouvons pas utiliser 
simplement la balise ColorAnimation comme ceci : 

<ColorAnimation 
Storyboard . TargetName= " Carre" 
Storyboard. TargetProperty="Background" 
From="Blue" To="Red" Duration="0:0:5"/> 

Le probleme n'est pas evident car l'attribut Background de la balise Border refoit 
bien comme valeur Blue. Toutefois, dans 1' animation, comme le demontre la 
balise utilisee, l'attribut modifie est un attribut de type Col or alors que l'attribut 
Background attend un attribut de type Brush. La syntaxe correcte sera done : 

<ColorAnimation 
Storyboard . TargetName= " Carre" 
Storyboard . TargetProperty="Background . Col or" 
From="Blue" To="Red" Duration="0:0:5"/> 
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Dans le meme ordre d'idee, il sera parfois necessaire de preciser completement 
la propriete. 

<ColorAnimation 
Storyboard. TargetName= "Carre" 
Storyboard.TargetProperty= 

" (Border. Background) . (Sol idColorBrush.Color) " 
From="Blue" To="Red" Duration="0:0:5"/> 

De cette facon, il est clair que la propriete modifiee est la propriete Color de 
l'objet de type Sol idColorBrush assigne a la propriete Background de l'objet de 
type Border. 

Si vous preferez, vous avez egalement la possibility de decrire vous-meme le 
contenu de la propriete Background. Vous pourrez ainsi nommer son contenu et 
y acceder directement dans l'animation. 

<Page xmlns= 

"http://schemas .mi crosoft.com/wi nfx/2006/xaml /presentati on" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml "> 
<Page.Triggers> 

<EventTrigger RoutedEvent="Page.Loaded"> 
<BeginStoryboard> 
<Storyboard> 

cDoubleAnimation 
Storyboard . TargetName= "Carre " 
Storyboard.TargetProperty="Width" 
From="10" To="200" Duration="0:0:2"/> 
cDoubleAnimation 
Storyboard . TargetName= "Carre " 
Storyboard. TargetProperty="Height" 
From="10" To="200" Duration="0:0:2"/> 
<ColorAnimation 
Storyboard. TargetName="Couleur" 
Storyboard .TargetProperty="Col or" 
From="LightGray" To="SlateGray" 
Duration="0:0:5" AutoReverse="true" 
RepeatBehavi or=" Forever"/> 
</Storyboard> 
</Begi nStoryboard> 
</EventTrigger> 
</Page.Triggers> 
<StackPanel Margin="20"> 
<Border Name=" Carre" 
Width="10" 
Height="10"> 
<Border . Background> 
<Sol idColorBrush x:Name="Couleur" 
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Color="White"/> 
</Border.Background> 
</Border> 

</StackPanel> 
</Page> 




^ention 

▼ Nommage avec x : Name 

Pour nommer un sous-element, vous devez utiliser I'attribut x:Name et non 
I'attribut Name. 



Jusqu'ici, nous avons utilise uniquement des animations qui faisaient varier une 
ou des proprietes d'une valeur a une autre. II existe une autre methode 
permettant de realiser des animations plus complexes. Cette methode consiste 
a passer successivement d'un etat a un autre. A titre d'exemple dans notre 
exercice complet, nous pouvons faire pivoter la photo sur son axe quand la 
souris passe dessus. Pour y arriver, nous devrons modifier la balise Border. 

<Border Width="100" Height="120" 
BorderThickness="l" 

Background= "White" BorderBrush="Black" 
Canvas. Top=" 10" Canvas. Right=" 10" > 
<Image Name="Photo" Source=" {Binding Path=Photo}" > 
<Image.RenderTransform> 
<TransformGroup> 

<ScaleTransform ScaleX="l" ScaleY="l"/> 
<TranslateTransform X="0" Y="0"/> 
</TransformGroup> 
</Image.RenderTransform> 
<Image.Triggers> 

<EventTri gger RoutedEvent=" Image . MouseMove"> 
<EventTri gger . Acti ons> 
<Begi nStoryboard> 
<Storyboard> 

<Doubl eAn i mat i onlls i ng Key Frames 
Storyboard.TargetProperty= 
" (UIElement.RenderTransform) . (TransformGroup. Children) [0] . (Seal eTransform. Seal eX)"> 
<Spl i neDoubl eKey Frame Val ue= " - 1 " 
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KeyTime="00:00:03"/> 
<Spl i neDoubl eKey Frame Val ue=" 1 " 
KeyTime="00:00:06"/> 
</DoubleAnimationUs"i ngKey Frames> 
<Doubl eAn i mat i onUs i ngKey Frames 
Storyboard . Target Property = 

" (U I El ement . RenderTransf orm) (Transf ormGroup . Chi 1 dren) 
* [l].(TranslateTransform.X)"> 
<Spl i neDoubl eKey Frame Val ue=" 100" 
KeyTime="00:00:03"/> 
<Spl i neDoubl eKeyFrame Val ue="0" 
KeyTime="00:00:06"/> 
</DoubleAnimationUsi ngKey Frames> 
</Storyboard> 
</Begi nStoryboard> 
</EventTri gger . Acti ons> 
</EventTrigger> 
</Image.Triggers> 
</Image> 
</Border> 




< Figure 8-22 : 



I Animation tournante 

Pour realiser cette animation, deux transformations sont definies, un change- 
ment d'echelle et une translation. Les valeurs definies sont choisies pour que 
ces transformations n'aient aucune action. Ce n'est que lors de l'activation du 
trigger que les transformations doivent avoir effectivement lieu. 

0^^^.Pour plus d 'informations sur les transformations, reportez-vous 
Renvoi au chapitre Appliquer des transformations sur les controles 
page 220. 

Ensuite, liees a l'evenement MouseMove, deux animations sont definies, une 
modifiant la transformation d'echelle et l'autre, la translation. Notez que les 
animations utilisent non pas DoubleAnimation mais bien DoubleAnimationUsin- 
gKeyFrames. Les valeurs a atteindre sont definies dans des noeuds fils : ici des 
noeuds de type Spl i neDoubl eKeyFrame. La valeur a atteindre est specifiee par 
l'attribut Value et le temps pour y arriver est determine par KeyTime. Une fois 
l'etat atteint, l'animation passe a l'etat suivant. Le passage d'un etat a l'autre 
se fait par interpolation. Cela n'empeche pas les differentes animations d'etre 
realisees en meme temps. Vous devez done les synchroniser en jouant sur les 
temps et par exemple en utilisant l'attribut BeginTime. 
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8.4 Checklist 

Dans ce chapitre, les notions essentielles que nous avons vues sont : 

■ comment appliquer une transformation a un controle et particulierement 
les rotations, les changements d'echelle et les changements d'oblicite ; 

■ a quoi sert une ressource et comment la creer ; 

■ comment creer un style ; 

■ comment utiliser les triggers pour effectuer automatiquement certaines 
taches ; 

■ comment creer simplement des animations. 
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Editer un document 275 

Annoter un document 282 

Checklist 288 



Les documents 

v 



Les documents sont au centre des developpements informatiques. lis represen- 
ted un moyen efficace de mise a disposition de 1' information et sont un 
complement de plus en plus important des donnees structurees. WPF, et en ce 
qui nous concerne plus specifiquement XAML, met a notre disposition un 
ensemble d'outils qui vont nous permettre de manipuler et de presenter ce type 
d' information. 



9.1 Utiliser FixedDocument 

FixedDocument permet d'afficher et d'imprimer un document de facon identique 
quel que soit la definition de l'ecran ou de 1'imprimante. En outre, ce controle 
offre plusieurs fonctionnalites a l'utilisateur. L'exemple suivant reproduit une 
page de l'aide de Windows. 

<Page xmlns= 

"http://schemas .mi crosoft.com/wi nfx/2006/xaml /presentati on" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 

> 

<FixedDocument> 

<PageContent Source="Docl-l.xaml " /> 
</FixedDocument> 
</Page> 

Le document Doc1-1.xaml : 

<FixedPage 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 

> 

<StackPanel Horizontal Al ignment="Stretch" > 
<Image> 

<Image.Source> 

Header.gif 
</Image.Source> 
</Image> 

<TextBl ock TextWrappi ng="WrapWi thOverf 1 ow" 
Margin="5,5,5,5" Width="400" 
Horizontal Al ignment="Center"> 
<TextBlock Foreground="Orange" 
FontSize="12" FontWeight="Bold"> 
XAML en un cl in d'oeil 
</TextBlock> 
<LineBreak/> 
<LineBreak/> 

Avec Avec l'arrivee de Windows Vista et de 
WPF/E, XAML va prendre de plus en plus 
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d 1 importance dans le quotidien de 
1 'utilisateur. Bien sur celui-ci ne s'en 
apercevra pas forcement. Combien 
d'utilisateurs savent que telle ou telle page 
est realisee avec Flash, ASP.NET, DHTML... 
Par contre, pour le developpeur et les 
designers, 1'arrivee de XAML et de WinFX 
represente une revolution qu'il ne faudra 
pas rater 

<LineBreak/> 

<LineBreak/> 

<TextBlock Foreground="Orange" 
FontSize="12"> 
Termini, le casse-tete du Design 
</TextBlock> 
<LineBreak/> 
<LineBreak/> 

Le developpeur et le designer peuvent travail ler 
en toute autonomie chacun sur sa parti e tout en 
disposant de ce que 1 'autre a fait et eel a au 
travers d'outils tres simples comme SourceSafe 
par exemple. Chacun pourra disposer des outils 
qui lui sont reellement destines. 
<LineBreak/> 
<LineBreak/> 
</TextBlock> 
</StackPanel> 
</FixedPage> 
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A Figure 9-1 : Affichage d'un document fixe 
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^uce 

^ Formatage complexe 

Pour obtenir differents formats complexes de vos caracteres, vous pouvez 
utiliser des TextBlock imbriques. 



Si votre document est compose de plusieurs pages, il suffit d'ajouter de 
nouvelles balises PageContent pour chaque page du document. Dans l'exemple 
ci-dessous, vous constaterez qu'il n'est pas necessaire de creer un fichier par 
page. Le contenu de la page peut etre directement defini dans la balise. 

<Page xmlns= 

"http://schemas .mi crosoft.com/wi nfx/2006/xaml /presentati on" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 

> 

<FixedDocument> 

<PageContent Source="Docl-l.xaml " /> 
<PageContent> 
<FixedPage> 

<StackPanel Horizontal Al ignment="Stretch" > 
<Image> 

<Image.Source> 

Header.gif 
</Image.Source> 
</Image> 

<TextBl ock TextWrappi ng="WrapWi thOverf 1 ow" 
Margin="5,5,5,5" Width="400" 
Hori zontal Al ignment="Center"> 

<Bold>Developpez votre creativite 

</Bold> Des... 

<LineBreak/> 

<LineBreak/> 

Encore une autre options sont les 

programmes... 

<LineBreak/> 

<LineBreak/> 

Les possibilites sont infinies ! 
</TextBlock> 
</StackPanel> 
</FixedPage> 
</PageContent> 
</FixedDocument> 
</Page> 
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• XamlPsd 




BPS 


* ' Auto Parse ► Refresh ^ 


$ Courier New 


- 16 - ^Hide Editor _ 



XAML 



Done. Markup saved to "C;\Program Files '.Micro soft SDKs\, l .Vindc.\s\vl,0\Bir',XamlPad_Saved.xamr. 



▲ Figure 9-2 : Affichage d'un document fixe de plusieurs pages 



• XamlPad 


BBS 


' Ajto Parse ► Refresh 3j Courier New 




* u + . LI □ □ 



Done. MarkLp saved tc "C'.Prccram Files'.Micmsoft SDKs\\Vindows\vl.O\Bin 
\Xam IPad_Sa ved ,xa m I" . 



▲ Figure 9-3 : Affichage de deux pages 
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Si vous souhaitez controler certains attributs comme Zoom, ShowPageBorders ou 
Vertical PageSpacing, vous pouvez inclure votre FixedDocument dans une balise 
DocumentViewer. 

<Page xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 

> 

<DocumentVi ewer Zoom="150"> 
<FixedDocument> 

</FixedDocument> 
</DocumentVi ewer> 
</Page> 



9.2 Utiliser Flow/Document 

Fl owDocument permet d'afficher du texte en adaptant automatiquement sa 
presentation au mieux selon l'environnement dans lequel il est affiche. L'ob- 
jectif est done totalement inverse de FixedDocument. 



^arque 
^ Balise obsolete 

Vous rencontrerez peut-etre au detour d'lntemet des exemples de documents 
utilisant la balise TextFlow. Toutefois, sachez que cette possibility a ete retiree 
a partir de la version beta 2 de WinFX et ne peut done plus etre utilisee. 



<Page x:Cl ass="Pagel" 
xmlns= 

" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" 

> 

<F1 owDocument TextAl ignment="Justify"> 
<Paragraph> 
<Image> 

<Image.Source> 

Photo.jpg 
</Image.Source> 
</Image> 
</Paragraph> 
<Paragraph> 

<Bold>Developpez votre creativite</Bold> 
Des que vous... 
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</Paragraph> 
<Paragraph> 

Encore une autre... 
</Paragraph> 
<Paragraph> 

Les possibilites sont infinies ! 
</Paragraph> 
</FlowDocument> 
</Page> 




Avec l'arrivee de Windows Vista et de "VVPF/E, XAML \"a prendre de plus en 
plus d'importance dans le quotidien de l'utilisateur. Bien sur celui-ci ne s'en 
apercevra pas forcement. Combien d'utiliseateur savent que tel ou tel page est 
realisee avec Flash, ASP.NIT. DHTML. ... Par contre pour le developpeur et les 
designers, l'arrivee de XAML et de YwnFX represente une revolution qu'ii ne faudra 
pas rater. 

Termine. le casse tete du Design Le developeur et le designer peuvent travailler 
en toute autonomie chacun sur sa partie tout en disposant de ce que iautre a fait et 
cela au travers d'outils tres simple comme SourceSafe par exemple. Chacun pourra 
disposer des outils qui lui sont reellement destines. 

Developpez votre creativite XAML dispose des armes suffisantes pour realiser 
des ecrans de haute qualite graphique interant des images 3D. duson. de la video ... 

Le tout soutenu par des langages de haut niveau... 

Les possibilites sont infinies ! 

Les otuils les plus courants... 



Done. Markup saved to "C:\Program Files\Microsoft SDKs\Windows\vl.O\Bin 
\XamlPad_Saved.xamT. 



A Figure 9-4 : Affichage d'une page avec FlowDocument 



^ention ^^^^^^ ^^^^^^^^^^^^^ 

7 Association a la classe 

Pour rappel, si vous utilisez XAMLPad, I'attribut x:Class="Pagel" doit etre 
retire du code puisque aucun code behind [.Net] n'est associe. 

- 



re^ 
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• XamlPad 




Q Auto Parse| ► Refresh 


_l 75% - 



XAML 

au quoliJicn 



Avec l'arrivee de Windows Vista et de WTF/E, 
XAML va prendre de plus en plus d'importance dans le 
quotidien de l'utilisaieur. Bien sur celui-ci ne s'en 
apercevra pas foroement. Corabien dutiliseateur savent 
que tel ou tel page est realisee a\ r ec Flash. ASP.NET, 
DHTML, ... Par contre pour le developpeur et les 
designers, l'arrivee de XAML et de WinFX represente une 
revolution qu'il ne faudra pas rater. 

Termine, le casse tete du Design Le developeur et le 
designer peuvent travailler en toute autonomie chacun 
sur sa partie tout en disposant de ce que l'autre a fait et 
cela au travers d'outils tres simple comme SourceSafe par 
exemple. Chacun pourra disposer des outils qui lui sont 
reellement destines. 



Developpez votre creatmte XAML dispose des armes 
surfisantes pour realiser des ecrans de haute qualite 
graphique interant des images 3D. du son. de la \ideo ... 



-Bum - 



Done. Marksp saved tc "C:\Program Files\Microsoft SDKs 
\Windov.-s\vLC\B.n\XamlPad_5aved.xaml". 



■< Figure 9-5 : Le 

meme document 



Notez que, lorsque vous redimensionnez la fenetre, Fl owDocument ne genere pas 
de defilement mais fait une gestion de pages. Dans l'exemple ci-dessus, le 
document occupe maintenant deux pages. La position courante et le nombre de 
pages sont indiques dans la barre d'outils en bas du document. 



Developpez votre 


creativite XAML dispose des armes 


ip 


- 1 of 2 -mm h — * — 




Zone inconnue 



▲ Figure 9-6 : Le nombre de pages 



Vous pouvez naviguer entre les pages en utilisant les petites fleches dans la 
barre d'outils. Vous pouvez egalement, depuis cette barre d'outils, choisir 
l'affichage sur deux pages cote a cote ou opter pour un defilement continu. 

Cette barre d'outils contient egalement un Slider qui vous permet de zoomer 
sur le document. Le zoom influence automatiquement le nombre de pages. 

Vous pouvez encore imposer des sauts de page en utilisant les attributs 
BreakPageBefore ou BreakPageAfter. 

Ajoutez le code suivant a la fin du document. 

<Paragraph BreakPageBefore="True"> 

Nouvelle page 
</Paragraph> 
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Quelle que soit la taille de la fenetre, Nouvelle page sera toujours sur une page 
separee. Cet attribut s'applique aussi bien a Paragraph que List et meme 
Section. II est d'ailleurs temps de vous en dire un peu plus sur la balise 
Section. Celle-ci a pour but de regrouper un certain nombre d'elements du 
texte exactement comme une section en Word. II devient alors possible 
d'appliquer certains attributs sur l'ensemble des paragraphes contenus dans la 
section. 



<Section BreakPageBefore= 


"True" FontSize="24"> 


<Paragraph> 




Nouvelle page 




</Paragraph> 




<Paragraph> 




Ce texte est dans la 


meme 


section que "Nouvell 


e page" 


</Paragraph> 




</Section> 





Outre la balise Section et la balise Table, dont nous parlerons plus loin dans le 
chapitre, vous pouvez utiliser au sein de Fl owDocument la balise Li st. 

<Page x:Class="Pagel" 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" 

> 

<F1 owDocument TextAl ignment="Justi fy"> 

<Paragraph> 

Les moyens les plus courants... 
</Paragraph> 
<List> 

<ListItem> 
<Paragraph> 

Appreil photo 
</Paragraph> 
</ListItem> 

Chaque element de la liste est defini dans un objet List I tern separe. 

<ListItem> 

<Paragraph> 

Telephone portable 

</Paragraph> 
</ListItem> 
<ListItem> 

<Paragraph> 
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Camescope 
</Paragraph> 
</ListItem> 
<ListItem> 
<Paragraph> 

Webcam 
</Paragraph> 
</ListItem> 
</List> 
</FlowDocument> 
</Page> 



| [2 Auto Parse] ► Refresh 



XAML 



Avec l'arrivee de Windows Vista 
et de WPF/E, XAML va prendre de 
plus en plus d'importance dans le 
quotidien de l'utilisateur. Bien sur 
celui-ci ne s'en apercevra pas 
forcement. Combien d'utilisea:e'ir 
savent que tel ou tel page est realisee 
avec Flash, ASP.NET. DHTML, .,. Par 
contre pour le developpeur et les 
designers, rarrivee de XAML et de 
WinFX represente une revolution qu'U 
ne faudra pas rater. 

Termine. le casse tete du Design 

Le developeur et le designer peuvent 
travailler en toute autonomie chacun 
sur sa partie tout en disposant de ce 
que l'autre a fait et cela au travers 
d'outils tres simple comme SourceSafe 
par exemple. Chacun pouna disposer 
des outils qui lui sont reellement 
destines. 



Developpez votre creathite 

XAML dispose des armes suffisantes 
pour realiser des ecrans de haute 
qualite grapbique interant des images 
3D, du son, de la video ... 

Le tout soutenu par des langages de 
haut niveau... 

Les possibilites sont infinies ! 
Les otuils les plus courants... 

• Visual Studio Cider 

• Expression Interactive Designer 

• Zara 3D 

• Aurora 



m 



Done. Markup saved tc "C:\Program Files\Microsoft SDKs\l'vlndows\vl.O\Bin 
\XamlPad_Saved.xamr. 



A Figure 9-7 : Une liste dans un FlowDocument 



^arque 

^* Attributs de Fl owDocument 



Afin d'ameliorer la presentation, vous pouvez egalement utiliser des attributs 
deja vus precedemment pour d'autres centrales tels que TextAl ignment 



JtS^ 



La balise List peut etre configuree pour realiser les listes a puce les plus 
courantes ou meme des listes numerotees. 

Avec l'attribut MarkerStyle, vous allez pouvoir choisir le type de puce ou de 
numero. Les differentes puces possibles sont Disk, Circle, Square et Box alors 
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que, pour les listes numerotees, vous pouvez utiliser LowerLatin, UpperLatin, 
Lower-Roman, UpperRoman ou encore Decimal. L'attribut MarkerOffset determine 
l'espace entre le texte et la puce. Si vous optez pour une liste numerotee, vous 
pouvez influencer le numero d'origine en utilisant l'attribut Startlndex. 

<List Startlndex="l" MarkerStyle="Decimal " Marker0ffset="20"> 



• XamlPad Q@S 


Q Auto Parse | ► Refresh V) Courier New "12 _ 


Le tout soutenu par des langages de haul niveau... 




Les possibilites sont infinies ! 




Le= oniils les plu= couranfe... 




l Visual Studio Cider 

2. Expression Interactive Designer 

3- Zam3D 

4- Aurora 




HI - 




Done. Markup saved tc "C:\Program Files\Microsoft 5DKs\Windrj»w\»lJ)^l 
\XamlPad_5aved.xamT. 



▲ Figure 9-8 : Une liste numerotee dans un FlowDocument 

Si les possibilites offertes par List ne vous satisfont pas, c'est alors le moment 
de voir le Bui 1 etDecorator. Ce n'est pas un controle specifique au document 
mais c'est certainement une des bonnes facons de l'utiliser. 

<Page xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xmlns:sys="cl r-namespace : System; assembl y=mscorl ib" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<StackPanel> 
<TextBlock> 

Bull etDecorator permet d'afficher des listes 
personnal isees. 
</TextBlock> 
<BulletDecorator> 

<Bul 1 etDecorator. Bui 1 et> 

<Image Height="16" Source="c:\bullet.gif"/> 
</Bul 1 etDecorator . Bui 1 et> 
<Label> 

Photographie 
</Label> 
</Bul 1 etDecorator> 
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Le Bui 1 etDecorator est divise en deux parties. La premiere, definie dans la 
propriete Bui 1 et, determine la forme de la puce. La seconde partie definit la 
forme que doit prendre le texte. II va sans dire que rien ne vous oblige a vous 
limiter a une image et a du texte. 



<Bull etDecorator Margin 


="20,0,0,0"> 


<Bul 1 etDecorator. Bui 1 


et> 


<Image Height="16' 


Source="c:\bullet.jpg"/> 


</Bul 1 etDecorator . Bui 


let> 


<Label> 




Film 




</Label> 




</BulletDecorator> 





En modifiant la marge, vous pouvez ajuster l'indentation de votre element. 
Notez que chaque element peut prendre une forme differente. Contrairement 
aux Listltem, il s'agit en fait chaque fois d'un controle separe independant des 
autres. 



<Bull etDecorator Margin="20,0,0,0"> 
<Bul 1 etDecorator . Bui 1 et> 

<Image Height="16" Source="c:\bullet.jpg"/> 
</Bul 1 etDecorator . Bui 1 et> 
<Label> 

Digitale 
</Label> 
</BulletDecorator> 
<BulletDecorator> 

<Bul 1 etDecorator. Bui 1 et> 

<Image Hei ght=" 16" Source="c:\bullet.gif"/> 
</Bul 1 etDecorator. Bui 1 et> 
<Label> 
Video 
</Label> 
</Bul letDecorator> 
</StackPanel> 
</Page> 



• XamlPad (ZNHIK 



| Q Auto Parse | \ Refresh & _ 
Bulle^Decoratcr pernet c'a^icher is:e:- per^sralisees. 
Photograph ie 
- Film 
« Digitale 
Video 



Done. Markup saved to "C:\Prograrn Fi I es\ Microsoft SDKs 
\Windows\vl ,0\Bin\XamlPad_Saved .xaml". 



Figure 9-9 : Une 

liste a puce realisee 
avec BulletDecorator 
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Avec l'exemple suivant, nous pouvons voir que bien d'autres controles peuvent 
etre inclus dans le Bui 1 etDecorator. 



<Page xmlns= 

http://schemas.microsoft.com/winfx/2006/xaml /presentation 
xml ns : sys= "cl r-namespace : System; assembl y=mscorl i b" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " > 
<StackPanel> 
<TextBlock> 

Bull etDecorator autorise quasi n'importe quoi. 
</TextBlock> 
<BulletDecorator> 

<Bul 1 etDecorator . Bui 1 et> 
<TextBox Width="30"/> 
</Bul 1 etDecorator . Bui 1 et> 
<Label> 

Photographie 
</Label> 
</Bul 1 etDecorator> 
</StackPanel> 
</Page> 



\zm\K 



| > ; Auto Parse t Refresh jJ, 



Bulle:Decorator autorise quasi n'importe quoi. 
Photographie 



Done. Markup saved to "C:\Program Files>Microsoft SDKs 
\WindowsW1.0\Bin\XamlPad_Saved.xamr. 



< Figure 9-1 Q : Un 

BulletDecorator pour 
le moins original 



Comme vous pouvez le constater, Bui l etDecorator permet le meilleur mais 
aussi le pire. A vous de 1' utiliser a bon escient. 

Apres ce petit detour, revenons au sujet qui nous occupe, l'affichage d'un 
document. Parfois, le document ne sera qu'un element de votre page parmi 
d'autres. Vous souhaiterez alors peut-etre le placer dans une grille. Malheureu- 
sement, FlowDocument ne peut etre inclus tel quel dans un controle de type Grid 
ou StackPanel. En revanche, il est possible de l'inclure dans une balise 
Fl owDocumentScrol 1 Vi ewer. 



<Page x:Class="Pagel" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
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xml ns : x= " http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" 

> 

<F1 owDocumentScrol 1 Vi ewer> 

<F1 owDocumentScrol 1 Vi ewer . Document> 
<F1 owDocument> 

</Fl owDocument> 

</Fl owDocumentScrol 1 Vi ewer.Document> 
</Fl owDocumentScrol 1 Vi ewer> 
</Page> 

Comme vous pouvez le constater, la presentation du document est differente 
une fois qu'il est inclus dans ce controle. 




Avec l'arrivee de Windows Vista et de WPF/E, XAML va 
prendre de plus en plus d'iruportance dans le quotidien de 
l'utilisateur. Bien sur celui-ci ne sen apercevra pas foremen!, 
Combien d'utiliseateur savent que tel ou tel page est realisee avec 
Flash. ASP.NET. DHTML. .,. Par contre pour le developpeur et les 
designers, J'arrivee de XAML et de W'inFX represente une revolution 
qu'il ne faudra pas rater. 

Termine, le casse tete du Design Le developeur et le designer 
peuvent trailer en toute autonomie chacun sur sa partie tout en 
disposant de ce que l'autre a fail et cela au travers d'outils tres simple 
comme SourceSafe par exemple. Chacun pourra disposer des outils 
qui lui sont reellement destines. 

Developpez votre creatMte XAML dispose des armes suffisantes 
pour reahser des ecrans de haute qualite graphique interant des 
images 3D, du son. de la video ... 



Done. Markup saved to "C:\Proaram nles\Microsoft SDKs\iVindosvs\vl.O\Bin 
\XamlPac_Saved.xaml". 



< Figure 9-1 1 : Un 

document dans un 
FlowDocumentScrollViewer 



La barre d'outils ne presente plus la navigation entre les pages. En fait, la 
notion de page disparait. C'est pourquoi une barre de defilement fait son 
apparition sur la droite. 



^arque 

^* BreakPageBefore 

Malgre la presence de I'attribut BreakPageBefore, le texte se suit sans aucu 
saut de page. 

- 



ur^ 



II reste en revanche la possibilite de faire un zoom. 
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Le Fl owDocumentScrol 1 Viewer peut etre integre dans un conteneur de type 
grille, par exemple. 

<Page x:Class="Pagel" 
xmlns= 

"http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" 

> 

<Grid> 

<Gri d . Col umnDef i ni ti ons> 

<Col umnDef i n i ti on /> 

<Col umnDef i n i ti on /> 
</Gri d . Col umnDef i ni ti ons> 
<F1 owDocumentScrol 1 Vi ewer Gri d . Col umn= " 1 "> 

<F1 owDocumentScrol 1 Vi ewer . Document> 
<FlowDocument> 

</FlowDocument> 

</Fl owDocumentScrol 1 Vi ewer . Document> 
</Fl owDocumentScrol 1 Viewer> 
</Grid> 
</Page> 



<$ XamlPad 






|Q Auto Parse] ► Refresh 


Courier New 


* 12 * _ _ 

. m 



Avec l'arrivee de Windows Vista 
et de WPF/E. XAML va prendre de 
plus en plus d'importance dans le 
quotidien de l'utilisateur. Bien sur 
celui-d ne s'en apercevra pas 
forcement. Combien d'utiliseateur 
savent que tel ou tel page est realisee 
avec Flash, ASP.NET, DHTML, ... Par 
contre pour le developpeur et les 
designers, Tarrivee de XAML et de 
WinFX represente une revolution 
qu'il ne faudra pas rater. 

Termine. le casse tete du Design 

Le developeur et le designer peuvent 
tra\"ai]ler en toute autonomie chacun 
sur sa partie tout en disposant de ce 
que Tautre a fait et cela au travers 
d'outils tres simple comme 
SourceSafe par exemple. Chacun 
pourra disposer des outils qui lui sont 
rppHpniP-u dps*inp=. 

Done. Markup saved to "C:\Program Fles\MkTosoft SDte\Windows\vl.O\Bin 
\XamlPad_Saved.xamr. 



▲ Figure 9-12 : Le meme inclus dans une grille 
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II en va de meme pour FlowDocumentPageViewer. 

<Page x:Cl ass="Pagel" 
xmlns= 

" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xainl " 
Title="Pagel" 

> 

<Grid> 

<Gri d . Col umnDef i ni ti ons> 
<Col umnDef i ni ti on/> 
<Col umnDef i ni ti on/> 
</Gri d . Col umnDef i ni ti ons> 
<FlowDocumentPageViewer Grid. Col umn="l"> 
<F1 owDocument PageVi ewer . Document> 
<FlowDocument> 

</FlowDocument> 
</Fl owDocument PageVi ewer . Document> 
</Fl owDocumentPageVi ewer> 
</Grid> 

</Page> 



• XamlPad BBE 



P Auto Parse | ► Refresh ^ Courier New * 12 ' H Hide Editor 



Avec 1'arrivee de Windows Vista et de 
WPF/E. XAML va prendre de plus en plus 
d'importance dans le quotidien de 
l'utilisateur. Eien sur celui-ci ne s'en 
apercevra pas fonjement. Combien 
d'utiliseateur savent que* tel ou tel page est 
realisee avec Flash, ASP.NET. DHTML, ... Par 
contre pour le developpeur et les designers, 
l'arrivee de XAML et de WinFX represente 
une revolution qu'il ne faudra pas rater. 

Termine, le casse tete du Design Le 

de\'elopeur et le designer peuvent trav-auler en 
toute autonomic chacun sur sa partie tout en 



Done. Markup saved to "C:\Program nles\Moosoft SOKs\Windows\vl.0\Bin\XamlP3d_Saved.xamr - . 



▲ Figure 9-13 : Avec un FlowDocumentPageViewer 

II est possible de regrouper les avantages de ces deux techniques d'affichage 
d'un document en mode Flow en utilisant la balise Fl owDocumentReader. C'est 
par ailleurs elle qui est utilisee par defaut si vous n'incluez pas Fl owDocument 
dans une des deux autres balises. Toutefois, il doit etre explicitement defini si 
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vous desirez par exemple integrer votre FlowDocument dans une grille. 

<Page x:Class="Pagel" 
xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" 

> 

<Grid> 

<Gri d . Col umnDef i n i t i ons> 

<Col umnDef i n i t i on /> 

<Col umnDef i n i ti on /> 
</Gri d . Col umnDef i ni ti ons> 
<F1 owDocument Reader> 

<FlowDocumentReader.Document> 
<FlowDocument> 

</FlowDocument> 
</Fl owDocumentReader . Document> 
</Fl owDocument Reader> 
</Grid> 

</Page> 



XamlPad 



\* Auto Parse I ► Refresh # 



-. 12 - 



Avec l'arrivee de Windows Vista ct 

de WPF/E, XAML va prendre de plus 
en plus d'importance dans le quotidien 
de l'utilisateur. Bien sur celui-ci ne s'en 
aperce\ja pas forcement. Combien 
d'utiliseateur savent que tel ou tel page 
est realisee avec Flash, ASP.NET, 
DHTML, ... Par contre pour le 
developpeur et les designers, l'arrivee 
de XAML et de WinFX represente une 
revolution qu'il ne faudra pas rater. 

Termine. le casse tete du Design Le 

developeur et le designer peuvent 
travailler en toute autonomie chacun 
sur sa partie tout en disposant de ce que 
l'autre a fait et cela au travers d'outils 
tres simple comme SourceSafe par 
exemple. Chacun pourra disposer des 



Done. Markup saved to "C:\Program Ftles\Microsoft SDKs\Windows\vl.O\Bin 
\XamlPad_Saved.xamr. 



▲ Figure 9-14 : Utiliser FlowDocumentReader 
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La gestion des pages fait a nouveau son apparition dans la barre d'outils sous 
le document. Comme nous l'avions vu sans le savoir, avec ce controle 
l'utilisateur peut choisir, grace aux boutons dans cette barre d'outils, entre 
raffichage par une ou deux pages mais aussi en mode de defilement. Une loupe 
sur la gauche permet d'ouvrir une extension de la barre d'outils afin de realiser 
des recherches dans le texte. 



BID® 



| □ Auto Parse] ► Refresh 



/v/uvlL( aii quotidian 



Avec l'arrivee de Windows Vista et de WPF/E. XAML va prendre de plus en 
plus d'importance dans le quotidien de l'utilisateur. Bien sur celui-ci ne s'en apercevra 
pas forcement. Combien d'utiliseateur savent que tel ou tel page est realisee avec 
Flash, ASP.NET, DHTML, ... Par contre pour le developpeur et les designers, l'arrivee 
de XAML et de WinFX represente une revolution qu'il ne faudra pas rater. 

Termine, le casse tete du Design Le developeur et le designer peuvent travailler 
en toute autonomic chacun sur sa partie tout en disposant de ce que 1' autre a fait et 
cela au travers d'outils tres simple comme SourceSafe par exemple. Chacun pourra 
disposer des outils qui lui sont reellement destines. 

Developpez votre creativite XAML dispose des armes suffisantes pour realiser 
des ecrans de haute qualite graphique interant des images 3D. du son. de la video ... 



r 



Done. Markup saved tc "C:',Prograr Files'.Microsoft SDKrA'-Vindcvvs'.vL'D'.Bir 
\XamlPad_Saved.xamr. 

A Figure 9-1 5 : Recherche dans le texte 

Les possibilites de mise en page ne s'arretent pas la. Vous pouvez par exemple 
inserer une figure dans votre document. Une figure permet d'introduire du 
contenu a un endroit specifique de la page. 



<Page 
xmlns= 

" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Title="Figure" 

> 

<FlowDocument> 
<Paragraph> 

<Figure Horizontal Anchor="Content Left "> 



La figure peut contenir autre chose qu'une image. Notez que, meme avec une 
image, vous devez l'inclure dans un paragraphe. 
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<Paragraph FontSize="8"> 

<Image Wi dth="40" Source="idea.gif"/> 

<LineBreak/> 

Idee. 
</Paragraph> 
</Figure> 

<Bold>Une idee !</Bold> 

Pourquoi ne pas placer une figure dans votre 

texte. Cela peut etre du plus bel effet dans 

la presentation d'un document. 
</Paragraph> 
<Paragraph> 

Vous venez encore de decouvrir une nouvelle 

possibilite avec XAML. 
</Paragraph> 
</FlowDocument> 
</Page> 



□ Auto Parse j ► Refresh 



Une idee : Pourquoi ne pas placer une 
figure dans votre texte. Cela peut etre du 
plus belle effet dans la presentation d'un 
document. 



Vous venez encore de decouvrir une nouvelle 
possibilites avec XAML. 



.2c\inerjt> 
araaraFh> 

igure HorizontalAnchor— "ContentLef t">| 
Paragraph FcnrSize=":"> 

<Image Wia£h="4C" Scurce="C: \Docume 
<LmeBrea!c/> 

Idee. | 



Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windov/s\vl.0\an\XamlPad_5aved.xaml. 



< Figure 9-16 : Une 

figure dans le texte 



Comme vous pouvez le constater, la figure se place en parallele du texte. Si 
nous avions simplement ajoute notre image dans le texte, le resultat aurait ete 
fort different. 



<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title=" Image" 
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<F1 owDocument> 
<Paragraph> 

<Image Width="40" Source="idea.gif '/> 
<Bold>Une idee !</Bold> 
Pourquoi ne pas placer une figure dans votre 
texte. Cela pent etre du plus bel effet dans 
la presentation d'un document. 
</Paragraph> 
<Paragraph> 

Vous venez encore de decouvrir une nouvelle 
possibility avec XAML. 
</Paragraph> 
</FlowDocument> 
</Page> 



I^AutoParee", ► Refresh 



Une idee ! Pourquoi ne pas placer une figure 
dans votre texte. Cela peut etre du plus belle effet 
dans la presentation d'un document. 

Vous venez encore de decouvrir une nouvelle 
possibility avec XAML 

>.irfi» M Ok 



<Fara3racri> 

<;mage /jidti".="*C Sc - arce="< 
<Bold>'Jne idee !</BoM> 

</?aragr3ph> 
<Faragraph> 

Vous venez encore de decouvri v 



Done. Markup saved to C:\Program Rles\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad_Saved.xaml. 



< Figure 9-17 : Une 

image dans le texte 



Comme toujours, vous disposez d'un certain nombre d'attributs pour modifier 
le comportement de la figure. Vous avez deja pu voir Horizontal Anchor dans 
l'exemple precedent. II existe egalement Vertical Anchor. Remplacez dans 
l'exemple la balise Figure par celle ci-dessous. 



<Figure Horizontal Anchor="ContentRight" 
Vertical Anchor="ContentBottom"> 
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Une idee 1 Pourquoi ne pas placer une figure dans 
votre texte. Cela peut etre du plus belle effet dans la 
presentation d'un document. 



Vous venez encore de decouvrir une 
nouvelle possibilites avec XAJIL, 




<Fi-3ure Hcriz:n-a_.-_"i:"n:r="Conter 
<?aragraph Font31n«*B"> 
<Imagie Hi dth= "40" S o orw "' 
<LineBrea]c/> 

Idee. I 



Done. Markup saved to Ci'^rogram FiksyVicrcsol SI:Ks 
\ Wi ndows\v 1 . 0 \Bi n\Xa m I Pad_Saved .xa ml . 



^ Figure 9-1 8 : 

Modification des 
ancres de la figure 



Position de la figure 

Comme vous pouvez le constater, la figure se positionne non pas en fonction 
paragraphe dans lequel elle est incluse mais bien en fonction de la page. 



du^ 



Les attributs Vertical Offset et Horizontal Offset vont egalement vous per- 
mettre de modifier la position en produisant un decalage. Le decalage peut etre 
une valeur positive ou negative selon le sens desire. 

<Fi gure Hori zontal Anchor="ContentRi ght " 
Vertical Anchor="ContentBottom" 
Verti cal Of f set="-50" Hon' zontal Of f set="-50"> 



• XamlPod 



Une idee ! Pourquoi ne pas placer 
une figure dans votre teste. Cela peut 
etre du plus belle effet dans la presen 

tation d'un document. Br' 

Vous venez encore de decouvrir une 
nouvelle possibilites avec XAML. 



ealOffttt-' 
-itsvMes imi 



' BorisoatalQf fae-="-f D' 
,idea.c/if"/> 



Done. Markup saved to C'.'Pragram Filesy'-'icrisol SDKs 
\Windows\vl .0 \Bm\XamlPad_5aved.xaml . 



•4 Figure 9-1 9 : 

Modification des 
offsets de la figure 
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Outre Figure, vous disposez egalement de la balise Floater pour realiser la 
presentation du document. Floater est tres semblable a Figure mais, contrai- 
rement a ce dernier, il se positionne par rapport au flux dans lequel il est inclus. 
L'attribut principal de Floater est Horizontal Al ignment, qui va permettre de 
positionner le contenu a gauche, a droite ou meme au centre du reste du flux. 

<Page 

xmlns= 

" http : //schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Title="Floater" 



<F1 owDocument 
<Paragraph> 

<Floater Horizontal Al ignment="Left"> 
<Paragraph FontSize="8"> 

<Image Wi dth="40" Source="idea.gif"/> 
<LineBreak/> 
Idee. 
</Paragraph> 
</Floater> 

<Bold>Une idee !</Bold> 

Pourquoi ne pas placer une figure dans votre 

texte. Cela pent etre du plus bel effet dans 

la presentation d'un document. 
</Paragraph> 
<Paragraph> 

Vous venez encore de decouvrir une nouvelle 

possibilite avec XAML. 
</Paragraph> 
</FlowDocument> 
</Page> 



y Aur.0 Parse ► Refresh £ 



Une idee ! Pourquoi ne pas placer une 

M figure dans votre texte. Cela peut etre du 
plus belle effet dans la presentation d'un 
— document 

Vous venez encore de decouvrir une nouvelle 
possibilites avec XAML. 



> 





1 Of 1 > N- 



<F1 ja*er Kcriz2n^aIrtligrj!ifi^r="Lef 



<?ara5rapli F2rvcSize="S"> 



< Image Ridch**40" Source""C: \Docu; 




< 



Done. Markjp saved to C:\Program Files\Micrcsoft SDKs 
\Mndows\vl.O\Bin\XamlPad_Saved.xaml. 



Figure 9-20 : 

Utilisation d'un Floater 
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Une derniere fonctionnalite interessante est la navigation par les liens. Cette 
navigation fonctionne comme les hyperliens du HTML. Elle vous permet 
d'atteindre une autre page XAML simplement en cliquant sur le texte. 

<Page 

xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Hyperlien" 

> 

<F1 owDocument> 
<Paragraph> 

<Bold>Naviguer avec des hyperl iens</Bold> 
A l'instar du HTML, il est egalement possible 
de naviguer en utilisant des liens 
</Paragraph> 
<Paragraph> 

<Hyperl ink NavigateUri="Page2.xaml "> 

Aller a la page 2. 
</Hyperl ink> 
</Paragraph> 
</FlowDocument> 
</Page> 



M C:\Documents and SettingsVJean-Alai... f-~||n | X 



Fichier Edit View Atteindre Favoris ? 

I Q Precedence - je] ^ ', 

Adresse ^3 C:\Documents and Setting v OK 

go. 

Nayiguer avec des h%per lieiis A l'instar di 
est egalement possible de naviguer en utilisant c 

Aller a la pag e 2. 



Zone inconnue 



Si vous cliquez sur le lien, le second document est charge. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Hyperlien et section" 



a HTML, il 
les liens 



o 



< Figure 9-21 : Le 

premier document 
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<FlowDocument> 
<Paragraph> 

vous etes sur page2.xaml 
<Hyperl ink Navigatellri="#suite"> 

Atteindre une section. 
</Hyperlink> 
</Paragraph> 

<Paragraph BreakPageBefore="True"> 

La page 2 
</Paragraph> 
<Section Name="suite"> 
<Paragraph> 

La section a atteindre 
</Paragraph> 
</Section> 
</Fl owDocument> 
</Page> 



M C:\DocumentsandSettings\Jeaii Alai... (^T]fn||^<] 


Rchier Edit View Atteindre Favoris ? 




j Q Precedence ■ Q ■ g |g 


; Adresse C:\Documents and Setting OY 


Liens ** 


O O 




vous etes sur Daae2.xaml Atteindre 


une 


section. 




C^i ^ « < 1 of 2 » M 







Figure 9-22 : Le 

second document 



Notez que ce second document possede deux pages. En cliquant sur le lien, 
vous atteignez la section presente sur la deuxieme page. 



I C:\DocumentsandSettings\Jean-Alai... f-~|| □ ||X | 



Rchier Edit View Atteindre Favoris ? 

©Precede* - © - g) g| ft 



■- ^ C:\Documents and Setting i_v £J OK ; Liens : 

La page 2 

La section a atteindre 



I 2 of 2 



-4 Figure 9-23 : La 

section 
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▼ Notion de page 

Quand on parle de page, il faut toujours bien faire la distinction entre page du 
navigateur et page du document. II s'agit de notions bien distinctes. 



Bien que les hyperliens soient parfaitement adaptes a 1' utilisation dans des 
documents, il est tout a fait possible de les placer dans des controles plus 
traditionnels comme un Label . 

Pour pouvoir disposer de toutes les fonctionnalites necessaires a l'affichage 
d'un document, il nous manque encore un grand classique, le tableau. Pour 
generer un tableau, nous disposons de toute une batterie de balises, a commen- 
cer par la balise Tabl e. Un peu a la facon d'une grille, nous devons commencer 
par definir le nombre de colonnes. Les colonnes sont definies au sein d'un nceud 
Tabl e. Col umns et decrites au moyen de la balise TableCol umn. En revanche, les 
lignes sont definies au fur et a mesure avec la balise Tabl eRow et sont incluses 
dans un noeud Tabl eRowGroup. Chaque ligne contient un ensemble de cellules. 
Les cellules sont creees par la balise Tabl eCel 1 et prennent place successive- 
ment dans les colonnes. II n'est pas necessaire de definir autant de cellules que 
de colonnes ; toutefois, si une colonne doit rester vide mais qu'au moins une 
colonne suivante est remplie, vous devrez creer une cellule vide pour cette 
colonne. A l'interieur des cellules, vous pouvez placer n'importe quel contenu 
et meme eventuellement un autre tableau. A titre d'exemple, creons un tableau 
simple. 

<Page 

xmlns= 

" http : // schemas . mi crosof t . com/wi nf x/2006 /xaral /presentat i on " 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 

> 

<F1 owDocument> 

<Table BorderBrush="Gray" BorderThickness="l"> 
<Table.Columns> 

<TableColumn Width="200" 
Background^ 1 Li ghtGray"/> 
<TableColumn Width="80"/> 
<TableColumn Wi dth=" 120"/> 
</Table.Columns> 

Apres avoir defini les colonnes, vous devez definir les lignes et leur contenu. 

<Tabl eRowGroup> 

<TableRow Background="Sl ateGray"> 
<TableCell 

Col umnSpan="3" 
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Block. TextAl i gnment="Center"> 
<Paragraph> 

Titre 
</Paragraph> 
</TableCell> 
</Tabl eRow> 

<TableRow Background="Gray"> 
<TableCell/> 
<Tabl eCel 1 
Bl ock . TextAl i gnment="Center"> 
<Paragraph> 

Valeur 
</Paragraph> 
</TableCell> 
<Tabl eCel 1 
Block. TextAl ignment="Left"> 
<Paragraph> 
Remarque 
</Paragraph> 
</TableCell> 
</Tabl eRow> 
<Tabl eRow> 
<TableCell> 
<Paragraph> 
Niveau a 
</Paragraph> 
</TableCell> 
<Tabl eCel 1 
Bl ock . TextAl i gnment="Center"> 
<Paragraph> 
99 

</Paragraph> 
</TableCell> 
<TableCell> 
<Paragraph> 
Boni +15 
</Paragraph> 
</TableCell> 
</Tabl eRow> 
<Tabl eRow> 
<TableCell> 
<Paragraph> 
Niveau c 
</Paragraph> 
</TableCell> 
<Tabl eCel 1 
Bl ock . TextAl i gnment="Center"> 
<Paragraph> 
48 

</Paragraph> 
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</TableCell> 
<TableCell> 
<Paragraph> 
A revoir 
</Paragraph> 
</TableCell> 
</Tabl eRow> 
</TableRowGroup> 
</Tabl e> 
</FlowDocument> 
</Page> 



• XamlPad 




□IS® 


* ' Auto Parse! ► Refresh 


; <a„ j Courier New ^ 12 






1 


Titre 




1 


Valeur Remarque 




Niveau a 


99 Boni +15 




Niveau c 


48 A revoir 




H 


iofi ipj ; - 


J * + 



</TabL 
</Table> 
< FlowDocumenO 
</Page> 



Done. Markup saved to "C:\Prograrn ft les \ Microsoft SDKs\>Vindcws\vl.O\Brn 
\Xam I Pad_Sa ved .xa m I" . 



A Figure 9-24 : Affichage dun tableau 

Notez dans cet exemple la presence de l'attribut Block. TextAl ignment, qui va 
permettre de specifier l'alignement du contenu de la cellule. 



9.3 Editer un document 

Le meilleur moyen pour editer un document reste le RichTextBox. Bien sur, 
comme son predecesseur, il reste un controle brut qui dispose en interne de tous 
les mecanismes necessaires mais pas d'outil standard pour les exposer a 
l'utilisateur final. Si vous desirez le transformer en un vrai editeur, il vous reste 
beaucoup de travail a fournir. 

<Page 

xmlns="http://schemas. mi crosoft.com/winfx/2006/xaml /presentation" 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 
Title="testrtf" Height="300" Width="300" 
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<Grid> 

<RichTextBox> 

En XAML, vous pouvez integrer un Fl owDocument dans le control RichTextBox. 

<F1 owDocument> 

<Paragraph> 
<Bol d> 

RichTextBox contient un Fl owDocument ! 
</Bold> 
</Paragraph> 
<Paragraph> 

Vous pouvez des lors utiliser tous les 
enrichissements de ce type d'objet dans 
le control e. 
</Paragraph> 
<List> 

<ListItem> 

<Paragraph>Parapgraph</Paragraph> 
</ListItem> 
<ListItem> 

<Paragraph>Secti on</Paragraph> 
</ListItem> 
<ListItem> 

<Paragraph>Tabl e</Paragraph> 
</ListItem> 
<ListItem> 

<Paragraph>Li st</Paragraph> 
</ListItem> 
<ListItem> 

<Paragraph>Fi gure</Paragraph> 
</ListItem> 
<ListItem> 

<Paragraph>Fl oater</Paragraph> 
</Li stltem> 
</List> 
</FlowDocument> 
</RichTextBox> 
</Grid> 
</Page> 

En utilisant les touches d' edition, vous pouvez enrichir le format du texte 
dactylographie. Par exemple, [ Ctrl ] +[TJ1 pour souligner ou [ Ctrl ) +(T) pour mettre le 
texte en italique. Vous trouverez la liste complete des raccourcis dans les 
annexes. 
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» Auto Parse] ► Refresh 



RichTextBox contient un FlowDocument \ 

Vous pcuvez des lors utiliser tout les enrich issements de 
ce type d'cbjet dans le cortrcle. 

• Parapgraph 

• Section 

• Table 

• List 

• Figure 

• Floatei] 



Done. Markup saved to "C:\PTograrn Files\Microsoft SDKs\Windows 
\vl.O\Bin\XamlPad_Savedj<amr. 



< Figure 9-25 

Editer un 
FlowDocument 




QAuto Parse | ► Refresh J> . 100% 



RichTextBox contient un FlowDocument \ 

Vous pcuvez des lors utiliser tout les enrich issements de 
ce type d'cbjet dans le controls . 

• Parapgraph 

• Section 
■ Table 

• List 

• Figure 

• Floater 



Done. MarkLp saved tc "C:\Prograrn Files\Microsoft SDKs\Wtndows 
\vl.O\Bin\XamlPad_Saved.xaml". 



< Figure 9-26 : 

Enrichir le format 



Dans la pratique, il sera tres rare de modifier un document fixe dans le code. 
Mais, plus vraisemblablement, vous devrez charger et sauver le document 
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dynamiquement. A titre d'exemple, nous pouvons realiser un menu contextuel 
qui permettra le chargement et l'enregistrement d'un document mais egalement 
son impression. Deux options complementaires permettront de voir d'une part 
comment ajouter du contenu riche et d' autre part comment utiliser les com- 
mandes d' edition autrement que via les touches de raccourci. 

Nous ajoutons un simple menu contextuel dans le code XAML avec les appels 
aux methodes qui y sont associees. 

<Window x:Class="Windowl" 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nfx/2006/xaml " 
Title="testrtf" Height="300" Width="300" 

> 

<Grid> 

<Ri chTextBox Name= " rt f Document "> 
<Ri chTextBox . ContextMenu> 
<ContextMenu> 

<MenuItem Click="Charger" 
Header="Charger"/> 
<MenuItem CI ick="Sauver" 
Header="Sauver"/> 
<Separator/> 

<MenuItem Click="AddButton" 
Header="ajout"/> 
<Separator/> 

<MenuItem Click="Imprimer" 
Header="Imprimer"/> 
<Separator/> 

Pour faire appel a une commande d'edition, nul besoin de faire appel a du code 
.NET, il suffit d'assigner la commande voulue a la propriete Command. 

<MenuItem 

Command="EditingCommands.ToggleBul lets" 
Header=" Puces "/> 
</ContextMenu> 
</Ri chTextBox . ContextMenu> 

</RichTextBox> 
</Grid> 
</Wi ndow> 

Ensuite, nous devons adapter le code .NET en consequence. 

1 Interaction logic for Windowl.xaml 
Imports System. 10 
Partial Public Class Windowl 
Inherits Window 
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Public Sub New() 

Initial izeComponentQ 
End Sub 

En premier, voyons comment sauver le contenu de notre Ri chTextControl . La 
premiere chose a faire est de definir un TextRange englobant le contenu complet 
du document. Ensuite, grace a ce TextRange, nous pourrons sauver le document 
dans un fichier via un Fi 1 eStream, et ce dans le format desire. Vous avez le 
choix entre le format RTF, bien sur, mais aussi XAML et d'autres egalement. 

Public Sub Sauver(ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
Dim range As TextRange 
Dim fichier As FileStream 
range = New TextRange ( 

rtf Document . Document . ContentStart 
, rtf Document . Document . ContentEnd) 
fichier = New FileStream("Sauvegarde.xml " 
, FileMode. Create) 
range . Save (f i chi er, DataFormats . Xaml ) 
fichier. Close() 
End Sub 

Pour recuperer le document, il suffit d'appliquer la meme methode mais en sens 
inverse avec la methode Load de la classe TextRange. 

Public Sub Charger (ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
Dim range As TextRange 
Dim fichier As FileStream 
If File.Exists("Sauvegarde.xml ") Then 
range = New TextRange ( 

rtf Document . Document . ContentStart 
, rtf Document . Document . ContentEnd) 
fichier = New FileStream("Sauvegarde.xml " 

, FileMode. Open) 
range. Load (fichier, DataFormats. Xaml ) 
fichier. Close() 
End If 

End Sub 

Pour imprimer un document, le plus simple est d'utiliser la classe PrintDialog, 
qui est capable d'imprimer les objets dont la classe herite de Visual, ce qui est 
justement le cas de FlowDocument, comme c'est par ailleurs le cas de tous les 
controles UIElement et de tous les conteneurs. 
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Public Sub Imprimer (ByVal sender As Object 

, ByVal e As RoutedEventArgs) 
Dim choixlmprimante As New PrintDialogO 
If choixlmprimante. ShowDialogO Then 
choixlmprimante. PrintVisual ( 

DirectCast(rtfDocument, Visual) 
, "Impression FlowDocument") 

End If 



End Sub 



Pour ajouter du contenu complexe comme un bouton, il est d'abord necessaire 
de creer le contenu a inserer, ce qui est fait par New Button ; ensuite, ce contenu 
est ajoute par exemple dans un paragraphe et place dans le document par 
1' intermediate de la propriete Blocks. 

Public Sub AddButton (ByVal sender As Object _ 
, ByVal e As RoutedEventArgs) 

Dim el em As New Button 
elem. Content = "Click" 

rtf Document . Document . Bl ocks . Add (New _ 

Paragraph ( (New Inl i neUIContai ner (el em) ) ) ) 

End Sub 



End Class 



Itestrtf 



Vous pouvez dactylographier voye texte et utilsez les 
tcjches de raccouro pour par exemple mettre ejn 
gras ou encore souliqner . Vqus trouverez la liste des 
raccourcis dans les annexes. Vous creerez vos propres 
fonctiors par exemple accesssibles par un menu 
contexts 



M Figure 9-27 : Le 

RichTextBox et son 
menu contextuel 



Le meme controle apres usage de l'ajout de contenu riche et de l'utilisation des 
puces. 



280 • Le guide du codeur 



Editer un document 



BUB 



Vous trouverez la liste des raccourcis dans 
les annexes et creer vos propres fonctions 
accessibles par exemple via un menu 
contextuel. 

Par exemple une liste a puce 

. un 
. deux 



ou I'ajout d'un element | 



Figure 9-28 : Le 

RichTextBox et son 
menu contextuel 



Lorsque vous demandez 1' impression, vous recevez automatiquement l'ecran 
standard de choix d' imprimante. 



General 

Selection de I'imprimante 



FTI Ajouter une imprimante 



tttat : Pret 
Emplacement : 
Commentaire : 



Rechetcher une imprimante. 



Etendue de pages 
P lout 

<~ Selection f Page actyelle 


Nombe de copies : |1 

[J] [53 [53 


f* Pages 





jmprimer | Annuler 



▲ Figure 9-29 : L'ecran standard d'impression 

Si vous souhaitez aller plus loin dans cette voie et creer sur cette base un editeur 
complexe, vous aurez certainement l'usage d'une barre de statut. Cette possibilite 
n'est bien sur pas limitee a l'usage d'un Ri chTextBl ock et peut etre utilisee dans 
de nombreux contextes. Son usage se revele relativement simple. II suffit de la 
definir a l'interieur du conteneur dans lequel elle doit prendre place. Les 
elements qui doivent etre presents sont places dans des StatusBarltem. 

<Page xmlns= 

"http: // schemas . mi crosof t . com/wi nf x/2006 /xaml /presentat i on " 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 
Title="testrtf" Height="300" Width="300" 

> 
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<Gri d> 




<Ri rhTpxtRox> 




<VRi rhTpxt Rnx> 




<StatusBar firirl rnlumn="n" 

\ J LOtU JUul \Jl\ 1 U . VU 1 U! Ml 1 \J 


(nri H Rnw= " 1 " 

\Jl\ I \J m \\\J VV ± 


Vprt i pa 1 Al i nnmpnt = 11 Rot t nm" 


Rarknrni mrl = 11 Rpi np 


<Statu^RarItpnr> 

- -j imujuui ± i» tin ^ 




\ 1 CA IU 1 UL IV/ 




Zoom: 




</TextBl ock> 




</StatusBarItem> 




<StatusBarItem> 




<S1 ider/> 




</StatusBarItem> 




</StatusBar> 




</Grid> 




</Page> 





udi® 



^ XamlPad 



> ajto Parsej ^ Refresh v . _ 

RichTextBox contient un FlowDocument ! 

Vous pcuvez des brs utiliser tout les enrichissements de 
ce type d'ofajet dans le controJe. 

• Parapgraph 

• Section 

• Table 

• List 

• Figure 

• Floater 



Done. Markup saved tc "C:\Prograrn Files\Microsoft SDKs 
\Windows\vl.O\Bin\XamlPad Saved.xaml". 



< Figure 9-30 : Une 

barre de statut 



Vous pouvez placer dans la barre de statut tous les controles dont vous aurez 
besoin. 



9.4 Annoter un document 

WPF offre un systeme complet permettant d' annoter aussi bien les documents 
fixes que les documents en mode flux. Les annotations pourront etre sauvees 
dans une table SQL ou plus simplement dans un fichier XML. 
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La premiere chose a voir dans le code ci-dessous, c'est la presence d'un 
namespace supplementaire. Celui-ci recoit comme nom ann. Notez aussi la 
presence de l'evenement Closed. 

<Window x:Class="Windowl" 
xmlns= 

[ ]" http : //schemas .mi crosof t . com/wi nf x/2006/xaml / presentati on" 
xml ns : x="http : //schemas .mi crosoft . com/wi nf x/2006/xaml " 
xmlns:ann= 

[]"cl r-namespace: System. Windows. Annotat ions;assembly=PresentationFramework" 
Title="Les annotations" Hei ght="500" Width="500" 
Closed="OnClose" 

> 

<StackPanel> 

Un menu ou seront reprises les fonctionnalites des annotations est ajoute a la 
fenetre. Ainsi que vous pouvez le constater, nous utilisons comme pour 
l'edition d'un document des commandes predefinies, mais cette fois en 
provenance d'AnnotationServi ce. Ces fonctionnalites sont au nombre de six : 

■ surligner la selection ; 

■ associer une note a la selection ; 

■ associer une note dessinee a la selection ; 

■ enlever le surlignement de la selection ; 

■ effacer les notes de la selection ; 

■ effacer les notes et les surlignements dans la selection. 

<Menu Name="MainMenu" > 

<MenuItem Header="Annotations" > 
<MenuItem Command= 

" ann : Annotat i onServi ce . CreateHi ghl i ghtCommand " 

Header="Surl igner" /> 
<MenuItem Command= 

"ann: Annotat ionService.CreateTextStickyNoteCommand" 

Header="Nouvelle note" /> 
<MenuItem Command= 

"ann : Annotat i onServi ce.CreatelnkSti ckyNoteCommand" 

Header="Nouvelle note manuscrite" /> 
<Separator /> 
<MenuItem Command= 

"ann : Annotat i onServi ce . CI earHi ghl i ghtsCommand" 

Header="Enlever le surlignement" /> 
<MenuItem Command= 

"ann : Annotat i onServi ce . Del eteSti ckyNotesCommand" 

Header="Effacer les notes" /> 
<MenuItem Command= 
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"ann : Annotati onServi ce.Del eteAnnotati onsCommand" 
Header="Effacer notes et surl ignement" /> 
</Menu> 

Ensuite, il ne reste qu'a definir notre document. 

<F1 owDocumentReader Name="docViewer"> 
<F1 owDocument TextAl i gnment=" Justi fy "> 
<Paragraph> 
<Image> 

<Image.Source> 
c:\Photo.jpg 
</Image.Source> 
</Image> 
</Paragraph> 
<Paragraph> 

<Bold>XAML en un clin d'oeil</Bold> 
</Paragraph> 
<Paragraph> 

Avec Avec I'arrivee de Windows Vista et de... 
</Paragraph> 
<Paragraph> 
<Bold> 

Termine, le casse-tete du Design 
</Bold> 
</Paragraph> 
<Paragraph> 

Le developeur et le designer peuvent... 
</Paragraph> 
</Fl owDocument> 
</Fl owDocument Reader> 
</StackPanel> 
</Wi ndow> 

Malheureusement, ce n'est pas tout a fait aussi simple. II nous faut encore 
demarrer le service permettant de realiser les annotations. Cette partie se fait 
dans le code .NET. 

Les membres suivants doivent etre definis. 

Private annotService As Annotati onService 
Private annotStream As FileStream 
Private annotStore As XmlStreamStore 

Private Sub StartAnnotationsQ 

annotService = New Annotati onService (docVi ewer) 
annotStream = New Fi leStream(" annotati ons. xml "_ 

, FileMode.OpenOrCreate 

, FileAccess.ReadWrite) 
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annotStore = New XmlStreamStore(annotStream) 

annotServi ce . Enabl e (annotStore) 
End Sub 

Dans cette methode, le service assurant la gestion des notes est demarre et le 
nchier XML devant contenir les notes lui est associe. La methode StartAnno- 
tations doit etre executee avant de pouvoir utiliser les notes. Vous pouvez 
utiliser soit l'evenement Loaded pour le demarrer, soit le constructeur. 

Public Sub New() 

Ini ti al i zeComponent () 
StartAnnotationsQ 

End Sub 

L'evenement Closed a egalement ete defini car, avant de quitter, il est 
necessaire de fermer le fichier et le service utilise par les annotations. 

Private Sub StopAnnotationsQ 

annotStore. Flush() 
annotStream.Flush() 
annotStream.Close() 
annotStore = Nothing 
End Sub 

Maintenant, nous pouvons voir les resultats. 



Nouvdle note 

NouveUe note manuacnte 



Effacer les notes 

Effacer notes et surlignenent 



Avec Avec l'arrivee de Windows Vista et de WPF/E, XAML va 
prendre de plus en plus d'importance dans le quotidien de 
l'utilisateur. Eien sur celui-ci ne s'en apercevra pas forgement. 
Combien d'utiliseateur savent que tel ou tel page est realisee 
avec Flash, ASP.NET, DHTML, ... Par contre pour le 
developpeur et les designers, rarrivee de XAML et de WinFX 
represente une revolution qu'il ne faudra pas rater 

Termine, le casse tete du Design 

Le developeur et le designer peuvent trarafller en toute 
autonomie chacun sur sa partie tout en disposant de ce que 
l'autre a fait et cela au travers d'outils tres simple comme 
SourceSafe par exemple. Chacun pourra disposer des outils qui 
lui sont reellement destines. 




▲ Figure 9-31 : Le menu des annotations 
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Comme vous pouvez le voir, le menu est desactive. En effet, il est necessaire 
de selectionner du contenu pour pouvoir lui associer une note. 



I Les annotations 




XAML en un clin d'ceil 

Avec Avec l'arrivee de Windows Vista et de WPF/E, XAML va 
prendre de plus en plus d'importance dans le quotidien de 
l'utilisateur. Bien sur celui-ci ne s'en apercevra pas forcement. 
Combien d'utiliseateur savent que tel ou tel page est realisee 
avec [ Flash, ASP.NET, DHTMLj ... Par contre pour le 



develoT 
repres 

Term 

Le de 
an tone 
1' autre 
Source 

lui sont reeiiement aestines. 




:e de XAML et de WinFX 
dra pas rater 



ivent travailler en toute 
t en disposant de ce que 
>utils tres simple comme 
rra disposer des outils qui 



▲ Figure 9-32 : Surlignement et annotation 

Dans cette seconde figure, vous devez pouvoir voir la premiere phrase qui a ete 
surlignee et une note ouverte associee a une autre partie du texte. 



Les annotations 



XkMl 



XAML en un clin d'ceil 

Avec Avec l'arrivee de Windows Vista et de WPF/E, XAML va 
prendre de plus en plus d'importance dans le quotidien de 
l'utilisateur. Bien sur celui-ci ne s'en apercevra pas forcement. 
Combien d'utiliseateur savent que tel ou tel page est realisee 
avec iFlash, ASP.NET, DHTMLj, ... Par contre pour le 
developpeur et les designers, l'arrivee de XAML et de WinFX 
represente une revolution qu'il ne faudra pas rater 

Termine, le casse tete du Design 



Le [ developeiir Jet le designer p euvent travailler en toute 
Z~]out en disposant de ce que 
d'outils tres simple comme 
ourra disposer des outils qui 



autc 
l'aut Edit 
Sou 
lui s 



Moos 



A Figure 9-33 : Une note manuscrite 
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Annoter un document 



L'utilite de ce genre de note reste a demontrer car il n'est pas toujours facile 
de dessiner avec la souris. 



XAML en un clin d'oeil 

Avec Avec l'arrivee de Windows Vista et de WPF/E. XAML va 
prendre de plus en plus d'importance dans le quotidien de 
l'utilisateur. Eien sur celui-ci ne s'en apercevra pas forcement. 
Combien d'utiliseateur savent que tel on tel page est realisee 
avec Flash, ASP.NET, DHTML), ... Par contre pour le 
develop'peur et les designers, l'arrivee de XAML et de WinFX 
represente une revolution qu'il ne faudra pas rater 

Termine, le casse tete du Design 

Le developeur ^t le designer peuvent travailler en toute 
autctllimie chacun sur sa partie tout en disposant de ce que 
l'autre a fait et cela au travers d'outils tres simple corame 
SourceSafe par exemple. Chacun pourra disposer des outils qui 
lui sont reellement destines. 



▲ Figure 9-34 : Les notes fermees 
La position des notes est conservee dans le fichier. 

X Modification du contenu 



Si le contenu du document change, les notes ne seront plus associees au texte 
d'origine. 



<te^ 



Nous avions deja vu les commandes d'edition ; maintenant, nous venons de 
voir qu'il existe egalement des commandes predefinies pour les notes. En fait, 
il en existe bien d'autres dont les commandes d' application, de navigation, de 
composant. . . 

A titre d'exemple, nous pouvons introduire l'une ou l'autre de ces commandes 
dans le code ci-dessus. 



<MenuItem Header=" Commandes" > 

<MenuItem Command="NavigationCommands. IncreaseZoom" 
Header="Zoom avant" /> 

<MenuItem Command="NavigationCommands.DecreaseZoom" 
Header="Zoom arriere" /> 
<Separator /> 

<MenuItem Command="ApplicationCommands.Copy" Header="Copier" /> 
</MenuItem> 
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Annotations 

Zoom avant 
Zoom airiere 



XAML en un clin d'ceil 

Avec l'arrivee de Windows Vista et de WPF/E, XAML va prendre 
de plus en plus d'importance dans le quotidien de l'utilisateur. 
Eien sur celui-ci ne sen apercevra pas forgement. Combien 
d'utilisateurs savent que tel ou tel page est realisee avec Flash], 
ASP.NET, DHTML, ..\ Par contre pour le developpeur et les 
designers, l'arrivee de XAML et de WinFX represente une 
revolution qu'il ne faudra pas rater 

Termine, le casse t et e du Design 

un gros iavantage reside dans le fait que le developeur et le 
designer peuvent travailler en toute autonomie chacun sur sa 
partie tout en disposant de ce que l'autre a fait et cela au travers 
d'outils tres simple comme SourceSafe par exemple. Chacun 



;pi 



■ •"•1 " - 



▲ Figure 9-35 : D'autres commandes 



v^arque 

Modification de la presentation 

Si vous comparez le bas de cette illustration par rapport aux precedentes, vous 
constaterez I'apparition de la barre d'outils I Cela est du au fait que, pour ce 
dernier exemple, le StackPanel qui encadre I'ensemble a ete remplace par un 
DockPanel . 



9.5 Checklist 

Dans ce chapitre, les notions essentielles que nous avons vues sont : 

■ afficher un document pour que sa presentation reste inchangee ; 

■ afficher un document pour qu'il s'adapte au mieux a l'ecran ; 

■ comment utiliser les controles specifiques a la gestion du document 
comme les paragraphes, les sections, les tableaux, les listes a puce, les 
figures, les layers et les hyperliens ; 

■ comment utiliser un Bui letDecorator pour realiser des listes originales ; 

■ comment editer et imprimer un document ; 

■ comment placer des annotations dans un document ; 

■ utiliser une barre de statut ; 

■ utiliser les commandes predefinies. 
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CIDER) 290 

Dans la gamme expression 303 

Aurora Designer 310 

ZAM 3D 313 

Checklist 314 

J 



I Les outils graphiques 



Bien que, comme nous l'avons vu, il soit possible et meme facile de creer des 
interfaces graphiques meme complexes en introduisant vous-meme le code 
XAML necessaire, les editeurs ne vont pas manquer de vous proposer des outils 
graphiques pour realiser vos ecrans, vos pages ou toutes autres realisations en 
XAML. De son cote, Microsoft prepare d'ores et deja divers outils. Le premier 
sera integre dans Visual Studio, les autres font partie de la gamme Expression. 
Microsoft n'est pas le seul acteur du marche actif dans le domaine. La societe 
Mobiform a elle aussi un outil nomme Aurora Designer et destine a la creation 
d'interfaces utilisateurs XAML. Pour la creation 3D, il existe l'outil ZAM 3D 
d'Electric Rain. Un autre acteur historique concernant XAML est XAMLON. 
Toutefois, au moment d'ecrire ces lignes, la position du produit n'est pas tres 
claire, que ce soit en termes de compatibilite ou de futur suite a 1' integration de 
la technologie Flash. 



^ II y a XAML et XAML \ 

Outre le XAML de Microsoft, d'autres projets similaires tel MyXAML ont vu ou 
verront le jour, lis offriront peut-etre des outils graphiques qui leur sont dedies. 
Ces projets ne sont pas forcement compatibles avec le XAML Microsoft, soyez 
prudent et assurez-vous que le produit respecte entierement la syntaxe XAML. 
A moins bien sur que vous n'optiez volontairement pour ce langage proche. . 



Dans les chapitres suivants, nous allons passer en revue ces differents produits. 
II s'agit non pas d'apprendre a les manipuler mais uniquement de les decouvrir 
sommairement et d'en comprendre les objectifs. Notez que tous ces produits 
sont actuellement en version beta et par consequent encore susceptibles d'etre 
largement modifies. Cette liste ne se veut pas exhaustive, et beaucoup d'autres 
logiciels auront probablement vu le jour ou ajoute le support du format XAML 
a leur propre logiciel. 



10.1 Le designer de Visual Studio 
(nom de code CIDER) 

Le premier de ces outils porte le nom de code de CIDER et est l' equivalent 
XAML du designer actuel inclus dans Visual Studio. II s'y integre d'ailleurs 
lui-meme. L'appel a l'un ou l'autre designer est automatique en fonction du 
fichier que vous ouvrez. CIDER est inclus dans l'extension WinFX pour Visual 
Studio que vous avez vraisemblablement deja installee. II fera partie integrante 
des prochaines versions de Visual Studio. C'est pourquoi nous nous y attarde- 
rons un peu plus. 
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Comme vous pouvez le voir dans l'image ci-dessous, lorsque vous ouvrez le 
fichier XAML l'editeur de Visual Studio vous permet de naviguer entre la vue 
en mode Design, la vue en mode XAML et le code source egalement appele 
code behind (code associe se trouvant dans le fichier extension .vb ou .cs). Pour 
passer de l'un a l'autre, il suffit de cliquer sur l'onglet adequat en bas a gauche 
de votre ecran. 

Le designer Cider ne differe guere de votre designer Visual Studio habituel. II 
presente au centre le resultat que vous allez obtenir. 
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A Figure 10-1 : Design d'une Window 

A gauche, vous retrouvez les composants que vous pouvez inclure. Pour ajouter 
un composant, il suffit de le selectionner dans votre fenetre de gauche et de le 
faire glisser ou vous desirez le placer. Vous pouvez deplacer ou redimensionner 
les objets deja places dans la fenetre centrale comme bon vous semble. 
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▲ Figure 10-2 : Ajoutd'un bouton 

A droite, vous trouverez les proprietes de l'objet selectionne, que vous pourrez 
adapter selon vos besoins. 
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▲ Figure 10-3 : Les proprietes 
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Bien sur, comme pour toute 1' interface Visual Studio, vous pouvez changer la 
disposition des differentes fenetres. 

Si vous desirez acceder directement au code ou simplement le visualiser, vous 
cliquez sur l'onglet XAML Les modifications apportees au code sont directe- 
ment repercutees dans l'affichage en mode Design. 
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A Figure 10-4 : Vue du code 



^ention 

▼ Code non valide 

Si votre code est errone, le mode Design ne pourra etre active. 
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Si votre projet concerne non pas une application Windows mais une page web, 
le designer fonctionne a l'identique excepte que la fenetre Windows est 
remplacee par un cadre representant les limites de la page. 




▲ Figure 10-6 : Design d'une page web 
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Nous pouvons reproduire l'exemple presente dans le chapitre 55 mais cette fois 
realise non pas a la main mais avec le designer. Faites glisser les differents 
composants et n'oubliez pas de changer les proprietes Name, MaxLength... 



^ention 



Label au lieu de TextBlock 



Tous les controles ne sont pas presents dans la barre d'outils. Pour I'exempl 
choisissez un controle similaire qui vous permettra d'obtenir un resultat proch 
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▲ Figure 10-7 : Design d'une page simple 

Lors de l'execution de notre page, nous obtenons un resultat fort similaire (voir 
Figure 10-8). 

Lorsque nous redimensionnons la page, le comportement est semblable a celui 
obtenu avec notre balise Canvas (voir Figure 10-9). 
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▲ Figure 10-8 : La page affichee 
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< Figure 1 0-9 : La 

page redimensionnee 



Et, pourtant, si nous observons le code genere, nous nous apercevrons qu'il 
s'agit d'une grille. 



<Page x:Class="Pagel" 

xmlns=" http://schemas.mi crosoft.com/winfx/2006/xaml /presentation" 
xml ns :x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Pagel" Height="122" Width="491"> 
<Grid> 

<Gri d . RowDef i n i t i ons> 

<RowDefinition Height="0.4*" /> 
</Gri d . RowDef i ni ti ons> 
<Gri d . Col umnDef i ni t i ons> 

<ColumnDefinition Width="0. 882470119521912*" /> 
</Gri d . Col umnDef i ni ti ons> 
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<Label Horizontal Al igninent="Left" Margi n= "3 . 37 , 1 1 . 7233333333333 ,0,0" 

Name="lblNom" Width="36.63" Hei ght= "25 .2766666666668" 

Verti cal Al i gnment= "Top">Nom</Label > 
<Text Box Margi n= " 37 . 9999999999999 , 13 . 7233333333333 ,0,0" Name= " txtNom" 

CharacterCasing="Upper" MaxLength="30" Horizontal Al ignment="Left" 

Wi dth=" 101 . 709090909091" Hei ght="20 .2766666666668" 

Verti cal Al i gnment= "Top"x/TextBox> 
<Label Margi n=" 141 . 079090909091 , 13 . 7233333333333 ,0,0" Name=" 1 bl Prenom" 

Hei ght="23 . 2766666666668" Verti cal Al i gnment="Top" 

Horizontal Al ignment="Left" Width="54.211818181818">Prenom</Label> 
<TextBox Margin="197, 15, 106,0" Name="txt Prenom" MaxLength="30" 

Height="20. 2766666666668" VerticalAl ignment="Top" x/TextBox> 
<Label HorizontalAl ignment="Left" Margin="2. 37, 38. 7233333333333, 0,58" 

Name= " 1 bl Adr " Wi dth= "35 . 63 ">Rue</Label > 
<TextBox Margi n="38,40 . 7233333333333 , 105 . 709090909091 , 58" MaxLength="80" 

Name="txtAdr" x/TextBox> 
<Label Hei ght= " 2 1 . 2766666666667 " Hon' zontal Al i gnment= " Left " 

Margin="3. 37, 0,0, 27. 0000000000001" Name="lblCP" 

Verti cal Al i gnment= "Bottom" Wi dth="70 . 63">Code Postal </Label > 
<TextBox Hei ght="26 . 2766666666667 " Hon' zontal Al i gnment=" Left" 

Margin="79,0,0,23" MaxLength="5" Name="txtCP" 

VerticalAl ignment="Bottom" Width="58"x/TextBox> 
<Label Height="22. 2766666666667" Margin="142. 37, 0,103,28" 

Name= " 1 bl Local i te " Verti cal Al i gnment= " Bottom">Local i te</Label > 
<TextBox Hei ght= "24 .2766666666667 " Margin="194, 0,106,26" MaxLength="50" 

Name= "txt Local ite" VerticalAl ignment="Bottom"x/TextBox> 
<Canvas HorizontalAl ignment="Right" Margin="0, 14,7,23" MinHeight="50" 

MinWidth="50" Name=" Canvas 1" Width="88" /> 
<Label HorizontalAl ignment="Right" Margin="0, 38. 7233333333333, 36, 58" 

Name="bl kPhoto" Width="35.63">Label</Label> 
</Grid> 
</Page> 



^arque 

Lisibilite du code 



Le code vous est presente exactement comme il est genere. C'est-a-dire une 
ligne de code par controle. La lisibilite du code est loin d'etre assuree. 



Comme vous pouvez le constater, le code est loin d'etre propre et il vous faudra 
le revoir vous-meme ou du moins adapter via la fenetre des proprietes certains 
elements pour obtenir des valeurs plus adequates. Evidemment, vous pouvez 
laisser tout ainsi et decider de toujours utiliser le designer. Dans ce cas, 
esperons seulement que vous n'ayez jamais a etre contraint, pour des raisons 
techniques, a devoir malgre tout acceder directement au code. 
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Done, a la lecture du code, nous avons une grille d'une ligne et d'une colonne. 
Les elements sont places dans cette cellule selon leur ordre et en jouant sur les 
tailles et les marges de chacun des elements. 

II est evidemment possible de creer des lignes et des colonnes avec le designer. 
II suffit pour cela de selectionner la ligne a gauche, petit triangle en haut a 
gauche, ou la ligne en bas a droite, meme triangle, et de le faire glisser la ou 
vous le desirez. Vous pouvez aussi deplacer une de ces lignes pour changer la 
taille d'une ligne ou d'une colonne de la grille. 
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< Figure 10-10: 

Les reperes de la 
grille 



Ces problemes eventuels de lisibilite sont 1' occasion de parler un peu du 
debogage d'une application XAML. En realite, il y a debogage non pas a 
proprement parler du code XAML mais seulement du code .NET qui lui est 
associe. C'est done un autre motif pour essayer d'avoir un code propre et clair. 
Comme le code depend peu d'une situation particuliere, l'exception generee en 
cas d'erreur suffit largement pour comprendre et resoudre le probleme. En 
revanche, il est toutefois possible de deboguer du code .NET que vous avez 
ecrit indirectement grace au XAML. 



0^^^. Pour plus d 'information sur ce code, reportez-vous au chapitre 
Renvoi Utiliser une grille page 61. 

Pour acceder facilement a ce code avec le debugger, vous ouvrez la source 
.NET de la page ou de la fenetre a laquelle vous desirez acceder. Vous placez 
un point d'arret sur la ligne Initial izeComponentQ, que vous trouverez dans le 
constructeur. Pour rappel, pour placer facilement un point d'arret vous placez le 
curseur sur la ligne voulue et vous appuyez sur la touche (F9) . 



298 • Le guide du codeur 



Le designer de Visual Studio (nom de code CIDER] 







X 






i t c ™7 ,c " nlrBb 




u \ tkttan 




0 OmMm 




Tf CcnfeeBm 








| ; : : ; | rrl. ",-r ■. .r. 








A ttm* 




• a IMBm 




© n,-.Vfift,-r, 








El - - 




Lwnmofi Lout omen 




It Vtmtm 








FT] PwWaiH 




~3 jip- ' • m r- 








.. ad 








TaKwfegl 




Menu* «rx) KHfeti * 




It Pmiltr 








•> Mm 




IU Tw«« 





▲ Figure 10-1 1 : Le mode debug 

Vous demandez ensuite l'execution du programme en mode debug en utilisant 
la touche (F5). II vous reste alors a manipuler le programme pour acceder a la 
page ou a l'ecran voulu. A ce moment, le programme s'arrete. Appuyez alors 
classiquement sur la touche |F1 1 ] pour poursuivre a l'interieur de la procedure 
appelee et vous etes en debogage dans le fichier g.vb correspondant. A titre 
d'exemple, vous trouverez ci-dessous le fichier correspondant a notre exemple. 
A vous alors de poursuivre le debogage. 



<auto-generated> 

This code was generated by a tool. 
Runtime Version:2. 0.50727. 42 

Changes to this file may cause incorrect behavior 
and will be lost if the code is regenerated. 
</auto-generated> 



Option Strict Off 
Option Explicit On 

Imports System 
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Imports 


System, 


, Wi ndows 




Imports 


System, 


, Wi ndows 


. Automati on 


Imports 


System, 


, Wi ndows , 


.Control s 


Imports 


System, 


Wi ndows 


. Control s . Primi ti ves 


Imports 


System, 


Wi ndows 


.Data 


Imports 


System, 


, Wi ndows 


. Documents 


Imports 


System, 


, Wi ndows 


. Input 


Imports 


System, 


, Wi ndows 


.Markup 


Imports 


System, 


Wi ndows 


, Medi a 


Imports 


System, 


Windows, 


.Media. Animation 


lllipui Lb 


Oy b Lclll , 


, VI 1 1 lUUWb , 


Morli ^ Ff forte 


Imports 


System, 


Windows 


.Media. Imaging 


Imports 


System, 


Windows 


. Media. Media3D 


Imports 


System, 


Windows 


.Medi a. Text Formatting 


Imports 


System, 


Windows 


.Navigation 


Imports 


System, 


Windows 


.Shapes 



1 1 '<summary> 
1 1 'Pagel 
1 1 '</summary> 
< 

Mi crosof t . Vi sual Bas i c . Compi 1 erServi ces . Des i gnerGenerated ( ) 

> 

Partial Public Class Pagel 

Inheri ts System. Wi ndows .Control s . Page 

Implements System. Windows. Markup. IComponentConnector 

Friend WithEvents lblNom As System. Windows. Controls. Label 

Friend WithEvents txtNom As System. Windows. Controls. TextBox 

Friend WithEvents lblPrenom As System. Windows. Controls. Label 

Friend WithEvents txtPrenom As System. Windows. Controls. TextBox 

Friend WithEvents lblAdr As System. Windows. Controls. Label 

Friend WithEvents txtAdr As System. Windows. Controls. TextBox 

Friend WithEvents lblCP As System. Windows. Controls. Label 

Friend WithEvents txtCP As System. Windows. Controls. TextBox 

Friend WithEvents lblLocalite As System. Windows. Controls. Label 

Friend WithEvents txtLocalite As System. Windows. Control s. TextBox 

Friend WithEvents Canvasl As System. Windows. Controls. Canvas 
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Friend WithEvents blkPhoto As System. Windows. Controls. Label 

Private _contentLoaded As Boolean 

1 1 '<summary> 

1 1 1 Initial i zeComponent 

1 1 '</summary> 

Public Sub Initial i zeComponent () 
Implements System. Windows. Markup. 

IComponentConnector. Initial i zeComponent 
If _content Loaded Then 

Return 
End If 

_contentLoaded = true 
Dim resourceLocater As System. Uri = 
New System. Uri ( 

"Wi nFxBrowserAppl i cati onl ; component\pagel . baml " 
, System. Uri Ki nd . Rel ati veOrAbsol ute) 
System. Wi ndows . Appl i cati on . LoadComponent (Me 

, resourceLocater) 

End Sub 
Sub 

System_Windows_Markup_IComponentConnector_Connect( 

ByVal connectionld As Integer 
, ByVal target As Object) 

Implements 

System. Windows. Markup. IComponentConnector. Connect 
If (connectionld = 1) Then 
Me.lblNom = 

CType (target , System . Wi ndows . Control s . Label ) 
Return 
End If 

If (connectionld = 2) Then 
Me.txtNom = 

CType (target, System. Windows. Control s.TextBox) 
Return 
End If 

If (connectionld = 3) Then 

Me.lblPrenom = 
CType (target , System. Wi ndows . Control s . Label ) 

Return 
End If 

If (connectionld = 4) Then 

Me.txtPrenom = 
CType (target, System. Windows. Control s.TextBox) 

Return 
End If 

If (connectionld = 5) Then 
Me.lblAdr = 
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CType (target , System. Wi ndows . Control s . Label ) 
Return 
End If 

If (connectionld = 6) Then 

Me.txtAdr = _ 
CType (target, System. Windows. Control s.TextBox) 

Return 
End If 

If (connectionld = 7) Then 

Me.lblCP = _ 

CType (target , System . Wi ndows . Control s . Label ) 

Return 
End If 

If (connectionld = 8) Then 

Me.txtCP = _ 
CType (target , System. Wi ndows . Control s . TextBox) 

Return 
End If 

If (connectionld = 9) Then 

Me. 1 bl Local i te = 

CType (target , System . Wi ndows . Control s . Label ) 

Return 
End If 

If (connectionld = 10) Then 

Me.txtLocalite = 
CType (target, System. Windows. Control s.TextBox) 

Return 
End If 

If (connectionld = 11) Then 

Me.Canvasl = 

CType (target , System. Wi ndows . Control s . Canvas) 

Return 
End If 

If (connectionld = 12) Then 

Me.blkPhoto = _ 

CType (target , System . Wi ndows . Control s . Label ) 

Return 
End If 

Me._contentLoaded = true 
End Sub 
End Class 

Lorsqu'il y a une faute au cours de l'execution dans la partie du programme 
ecrite en XAML, c'est ce code que le debugger va vous montrer. 
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10.2 Dans la gamme expression 

La gamme expression est une nouvelle gamme de logiciels Microsoft destinee 
au designer. Elle se compose de trois programmes distincts : Graphic Designer 
pour le graphisme, Interactive Designer pour le design d' application XAML et 
Web Designer pour le developpement de page web. 

Graphic Designer 




Figure 10-12 : Expression 
Graphic Designer 



Comme son nom l'indique, il s'agit d'un outil de design destine a celui qui 
souhaite realiser du graphisme. II ne s'agit pas a priori d'un pur outil XAML 
puisqu'il travaille avec un autre format de fichier. En revanche, il dispose d'un 
outil d'exportation vers le XAML, ce qui fait de lui un candidat ideal pour 
realiser les graphismes que vous souhaitez introduire dans vos developpements. 

Le but de ce livre n'etant clairement pas de vous expliquer le fonctionnement 
de cet outil, qui merite a lui seul un livre, vous ne trouverez dans ce chapitre 
qu'une simple presentation de l'outil sans meme entrer dans ses possibilites. 

La page principale de Graphic Designer est tres classique avec la page 
proprement dite a droite et les fenetres d'outils presentees par defaut a gauche. 




A Figure 10-13 : La page principale 
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Le tracage des objets se fait classiquement en utilisant des points de reference. 




▲ Figure 10-14 : Tracer une forme 



II est evidemment possible de changer apres coup les motifs dessines. 



HMfcrowfl (tprr«i»n Graphic Drslgnci May TOOiS ('TP Dnr.1 * 




▲ Figure 10-15 : Modifier la forme 
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Pour exporter le resultat en XAML, il suffit d'utiliser la fonction d' exportation. 



Export Xaml 



Document | Effects | Images | 
Document Format: 



< Figure 10-16 : 

Exporter en XAML 



Celle-ci vous permet de definir quelques parametres comme l'utilisation d'un 
Canvas. 

Une fois le fichier exporte, il ne vous reste qu'a l'incorporer dans votre 
programme ou a l'afficher directement dans un browser. 



C:\Documents and Settings\jf\Mes doci 


mentsWistial Studio 2005\Projects\graph.xaml - Microsoft Internet... 


Fichier Edit View Atteindre Favoris ? 




& 


^ Preiv-denlt (j} ^ ^ i / '■ Rethetcher ' . Favoris 


m & a □ n. « 



■ - C:\Documents and Settings\)f\Mes doc u m e nt-; >, i s u -a I Studio L:u05\Projects\gtaph.xaml 



3B C 




J Poste de travail 



A Figure 10-17 : Le dessin dans un navigateur Web 
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Comme vous pouvez le constater, le rendu n'est pas totalement identique mais 
Graphic Designer est lui aussi en version beta et nous pouvons esperer que ces 
problemes soient prochainement resolus. 

Vous pouvez egalement ouvrir le fichier XAML genere mais, comme nous 
pouvions nous y attendre, celui-ci est relativement touffu. II contient plus de 
400 nceuds pour un total de plus de 150 000 caracteres. 



Interactive Designer 




A Figure 10-18 : Expression 
Interactive Designer 

Interactive Designer est un outil qui peut etre considere soit comme un outil de 
conception complet, soit comme un outil complementaire a Visual Studio et a 
Cider. Grace a sa puissante interface utilisateur, il permet de creer des pages 
XAML tres completes et incluant des animations entierement creees visuelle- 
ment. 

Comme Visual Studio, il travaille sur la base de projets contenant l'ensemble 
d'une application. Celle-ci sera alors compilee. Vous avez le choix entre le 
langage VB.NET ou C#. Avec ceux-ci, vous pourrez encoder du code .NET. II est 
egalement capable de compiler et d'executer les projets. C'est pourquoi il peut 
etre considere comme un outil complet. II n'offre toutefois pas les facilites de 
developpement de code qu'offre Visual Studio. L'ideal etant d'utiliser les deux. 



R Create New Project 



Select a Project Type: 



Project Name: Test 



Standard Control 
Application Library 
(.exe) 



Language: Visual Basic 



| OK | Caned 



< Figure 10-19 

Choix du langage 
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Les fichiers projets sont compatibles avec ceux de Visual Studio, ce qui permet 
de passer facilement de l'un a l'autre et rend ces outils complementaires, Visual 
Studio etant destine au developpeur et Interactive Designer, comme son nom 
l'indique, au designer. 

Creons avec Visual Studio un petit projet ou le developpeur n'a fait que placer 
les controles dont il avait besoin et sans se soucier de l'esthetique. 
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A Figure 10-20 : Un projet en Visual Studio 

Recuperons-le dans Interactive Designer simplement en faisant Open Project 
(voir Figure 10-21). 

Le projet est parfaitement recupere et la fenetre est affichee telle quelle. Le 
designer peut alors realiser la mise en page. Si necessaire, il peut avoir acces 
au code et meme a 1'IntelliSense (voir Figure 10-22). 
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A Figure 10-21 : Un projet en Visual Studio 
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A Figure 10-22 : Le code .NET dans Interactive Designer 
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II peut evidemment aussi acceder au code XAML. 
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A Figure 10-23 : Le code XAML dans Interactive Designer 



Une fois les modifications apportees, il peut executer 1' application pour voir le 
resultat. 



testinteractive f-lf5"ll X 



Intoduisez id votre message pour le 
service support. Ensuite appuyez sur le 
bouton OK pour realiser I'e nvoi 



I 1 < Figure 10-24 : 

' ' Execution depuis 

^^^^^^^^^^_^^^^^^^^^^J Interactive Designer 

Le projet peut parfaitement etre a nouveau ouvert dans Visual Studio, qui 
prendra parfaitement en compte les modifications apportees. 
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A Figure 10-25 : Projet reouvert avec Visual Studio 



10.3 Aurora Designer 

Aurora Designer est produit par la societe Mobiform. II est une alternative aux 
produits Microsoft et offre lui aussi un outil puissant de design XAML. II offre 
egalement des composants supplementaires pour enrichir encore les possibilites 
de XAML. En revanche, comme d'ailleurs Graphic Designer, il s'agit d'un outil 
exclusivement XAML sans support du code .NET qui devra etre gere separe- 
ment si vous en avez besoin. 




▲ Figure 10-26 : Choix du langage 
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Aurora Designer 




L'interface d' Aurora est tout aussi classique que les precedentes avec une 
fenetre de design et des fenetres deplacables pour la boite a outils, les 
proprietes, les fichiers du projet et ainsi de suite. 




▲ Figure 10-27 : L'interface d'Aurora 

Selon le type de fichier choisi lors de la creation, Aurora vous propose un 
conteneur adapte. Pour une fenetre Windows, il s'agit par defaut d'une grille. 
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▲ Figure 10-28 : Design d'une fenetre 
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Vous pouvez non seulement visualiser le code XAML mais egalement le 
modifier. La partie gauche de l'ecran vous facilite la navigation. 

Si nous transferons le code cree dans XamlPad, il s'affiche sans probleme. 



• XamlPad 


ESS 


AutoParse ►Refresh V, Courier New - 12 * H Hide Editor 100% 








Norr. 1 
Adresse 

cp | Locaiite 












< , > 


Done. Markup saved to "C:\Program Rles\Microsoft SDKs\ Winders \vl.O\Bir\XamlPad_Saved. rami". 



A Figure 10-29 : Le code dans XamlPad 



Nous pouvons aussi creer des projets 3D mais aucun element specifique comme 
une sphere ou meme un cube n'est prevu. Ce qui est propose correspond au 
XAML de base uniquement. II est malgre tout possible de realiser rapidement 
un cube en utilisant trois rectangles et en leur appliquant des transformations de 
maniere entierement visuelle. 



urn (Vilgwr Mali Harm Wtwiii* imllltad 



AURORA 




▲ Figure 10-30 : Un cube 
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ZAM 3D KE 



Malheureusement, le code cree pour le cube ne semblait pas compatible avec 
XamlPad ou Visual Studio. Ce genre de probleme sera vraisemblablement 
corrige pour la version definitive du produit. II est en effet difficile pour un 
concepteur tiers de realiser un logiciel destine a un environnement qui est 
encore en mutation. 



10.4 ZAM 3D 

ZAM 3D, de la societe Electric Rain, est un outil completement oriente 3D. II 
offre une panoplie de formes 3D predefinies ainsi que la creation et le 
positionnement de spot et de camera par simple drag and drop. Vous aurez 
egalement avec cet outil la possibilite de definir des animations grace a la 
gestion des lignes de temps. Le resultat de votre travail peut etre sauve en 
format XAML soit sous forme d'une page de code soit sous forme d'une 
ressource que vous pourrez inclure dans vos developpements. 
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▲ Figure 10-31 : L'interface de ZAM 3D 
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▲ Figure 10-32 : Une autre vue de ZAM 3D 



10.5 Checklist 

Dans ce chapitre, nous avons parcouru les outils les plus connus actuellement 
et nous avons vu comment ils peuvent ou ne peuvent pas nous aider. Les 
fonctionnalites essentielles sont : 

■ l' assistance au developpement avec Visual Studio et son extension pour 
WinFX ; 

■ le travail de design avec Interactive Designer et Aurora Designer ; 

■ la composition 3D avec ZAM 3D ; 

■ le XAML dans le monde du graphisme avec Graphic Designer. 
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Le dessin 



Dans l'informatique moderne, le visuel a pris une tres grande importance. C'est 
pourquoi, plutot que limiter les possibilites de l'affichage a des images 
predefinies, XAML integre des fonctionnalites de dessin relativement avancees. 
Contrairement aux fonctions de dessin souvent rencontrees jusqu'alors, il s'agit 
non pas de bitmap mais bien de vectoriel. Le langage offre en fait toutes les 
fonctions necessaires a la creation d'images vectorielles 2D ou 3D et a leur 
animation. Ce qui en fait une plate-forme ouverte egalement au monde de la 
CAO, par exemple, et va permettre assez facilement de melanger du contenu 
tres riche en terme de dessin avec du contenu plus classique. 

11.1 Le dessin en 2D 

XAML ne nous offre pas seulement les possibilites de realiser des ecrans 
composes de controles divers ; nous pouvons egalement realiser des dessins. II 
nous offre une gamme de classe relativement complete allant du dessin 2D a la 
3D. Toutefois, pour bien dessiner, il faut avant tout savoir dessiner. L'objectif n'est 
pas ici de vous apprendre a dessiner mais il s'agit seulement de vous montrer 
quelques possibilites offertes par XAML avec des realisations tres simples. 

Pour commencer, voyons tout d'abord comment tracer une ligne. Ce qui se fait 
naturellement avec la balise Line. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nfx/2006/xaml " 
Title="Pagel" Height="122" Width="491"> 
<Canvas> 

<Line Xl="150" Yl="50" X2="150" Y2="80" 
StrokeThickness="2" Stroke="Blue"/> 
</Canvas> 
</Page> 



* XamlPad EE(5< 



| * Auto Parse] ^ Refresh 



I 



ia="http: //schemoa.microsclt .com/wic 
i3:x»"hc _p i// schemas .microaofL .com/ii 
.e="?agel" Heiglic="122" Width="491"; 

.-•"150" Yl»-4|0" X2-"1S0" Y2-"E0" Srr _ 

<J Nil -1 ) 

Done. Markup saved tc "C:\Program Files\ Microsoft 
SDKs\Wind(w,-sW1.0\Bin\XamlPad_Saved.xafnl". 



A Figure 11-1 : Un 

simple trait 
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Comme vous pouvez le constater, pour tracer une ligne vous devez definir le 
point d'origine aux attributs XI et Yl et le point de destination avec X2 et Y2. 
L'origine des coordonnees correspond au coin superieur gauche du conteneur, 
dans ce cas le Canvas. L'attribut Stroke fixe la couleur du trait alors que 
StrokeThickness en fixe la largeur. Ces deux derniers attributs sont obligatoires 
si vous desirez voir le resultat. 

XAML dispose aussi de formes geometriques. L' ellipse est une de ces formes. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 
Title="Pagel" Height="122" Width="491"> 
<Canvas> 

<Line Xl="150" Yl="50" X2="150" Y2="80" 

StrokeThickness="2" Stroke="Blue"/> 
<E1 1 i pse Canvas. Top="30" Canvas. Left=" 120" 

Height="10" Width="12" StrokeThickness="2" 

Stroke="Bl lie" Fi 1 1 ="Li ghtBl ue"/> 
<E1 1 i pse Canvas. Top="30" Canvas. Left=" 165" 

Height="10" Width="12" StrokeThickness="2" 

Stroke="Bl ue" Fi 1 1 ="Li ghtBl ue"/> 
</Canvas> 
</Page> 



Ullnllxl 



Auto Parse | ► Refresh 



Title="PageI" Height:="122" Hid" 
<Canvaa> 

<Lme X1="15D" Y1="5C" X2="150" Y2= 
<Illipae Canvas. Top="3j" Canvas. Le: - 
</Canvaa> 
</Page> 

s 

< - I, ■ 



Done. Marlo-p saved tc "C:\Program Rles\MiO0S0ft 
5DKs\Windo...'s , 1 vL: 1 Bir.\XamlPad_Saved.xamr. 



Figure 11-2 

Une ellipse 



La balise Ellipse trace une ellipse dont les dimensions sont fixees par les 
attributs Height et Width. Le positionnement de l'ellipse differe de celui de la 
ligne mais est plus conforme a ce que nous avions utilise jusqu'ici puisqu'il 
faut utiliser les proprietes attachees du conteneur; ici de Canvas. 

La propriete Fi 1 1 permet de remplir le fond d'une forme. 
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Pour tracer un cercle, il suffit de tracer une ellipse dont les deux dimensions 
sont egales. Partant de ce principe, XAML n'a pas integre de classe Cercle. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nfx/2006/xaml " 
Title="Pagel" Hei ght=" 122" Width="491"> 
<Canvas> 

<Line Xl="150" Yl="50" X2="150" Y2="80" 

StrokeThickness="2" Stroke="Blue"/> 
<E1 1 ipse Canvas. Top="30" Canvas. Left=" 120" 

Height="10" Width="12" StrokeThickness="2" 

Stroke="Bl ue" Fi 11 =" Li ghtBl ue"/> 
<E1 1 ipse Canvas. Top="10" Canvas. Left="90" 

Height="120" Width="120" StrokeThickness="2" 

Stroke="Blue"/> 
</Canvas> 
</Page> 



□US' 



> Auto Parse ► Refresh 




Title="Pagel" Heighr="122" Hid* 
<■: = - f : 

<Line Xl="150" YL="50" X2="150" 

llipae Cariva3.Top="3j" Car.vaa.Le 
<Illipae Canvas. rop="3I" Car.vaa.Le 
<Ellipse Canvas. Top™"10" Car.vaa.Le 



Done. HarkLp saved to "C:'\Program Files\Microsoft 
SDKs\Windows\vl,o\Bin\XamlPad_Saved.xaml". 



Figure 11-3 

Un cercle 



Vous pouvez egalement utiliser les formes Rectangle, Polygon et Polyline. 

<Page 
xmlns= 

" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nf x/2006/xaml "> 
<Canvas> 

<Rectangle Canvas. Top="20" Canvas. Left= "20" 
Width="100" Height="80" Fill="Blue"/> 
<Polygon Fill="Green"> 
<Polygon.Points> 
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am 



<Point X="70" Y="0"/> 
<Point X="20" Y="120"/> 
<Point X="120" Y="120"/> 
</Polygon.Points> 
</Polygon> 

<Polyline Stroke="Yel low" StrokeThickness="5"> 
<Polyl ine.Points> 

<Point X="70" Y="120"/> 
<Point X="20" Y="50"/> 
<Point X="120" Y="20"/> 
<Point X="108" Y="40"/> 
<Point X="120" Y="20"/> 
</Polyline.Points> 
</Polyl ine> 
</Canvas> 
</Page> 



Avec la classe Polygon, vous pouvez tracer n'importe quelle figure. La liste des 
points fournit les differents sommets du polygone. La classe Polyline est tres 
similaire mais permet de realiser des formes ouvertes. Les points fournis sont 
non plus les sommets mais simplement des points de passage relies par des 
lignes droites. 

En dehors des figures de base, qui sont le moyen le plus simple de dessiner, il 
est egalement possible de tracer des formes complexes en utilisant un chemin. 
Ce chemin sera une succession de segments de formes differentes. Dans un 
premier exemple, limitons le chemin a un segment en forme d'arc. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 
Title="Pagel" Height="122" Width="491"> 





Done. MarkLp saved tc "C:\Program Files 
'-.Microsoft SDKs '.'/.' indo'.vs'vvl 0\Bir 
\XamlPad_5aved.xamr. 



Figure 11-4 : 

Les autres formes 
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<Canvas> 

<Line Xl="150" Yl="50" X2="150" Y2="80" 
StrokeThickness="2" Stroke="Blue"/> 
<E1 1 ipse Canvas. Top="30" Canvas. Left=" 120" 
Height="10" Width="12" StrokeThickness="2" 
Stroke="Bl ue" Fi 1 1 ="Li ghtBl ue"/> 
<E1 1 i pse Canvas. Top="30" Canvas. Left="165" 
Height="10" Width="12" StrokeThickness="2" 
Stroke="Bl ue" Fill =" Li ghtBl ue"/> 
<E1 1 ipse Canvas. Top="10" Canvas. Left="90" 
Height="120" Width="120" StrokeThickness="2" 
Stroke="Blue"/> 
<Path Stroke="Blue" StrokeThickness="2"> 
<Path.Data> 
<PathGeometry> 

<PathGeometry.Figures> 

<PathFi gure StartPoi nt=" 120, 100"> 

<ArcSegment Size="10,5" Point="180,100"/> 
</PathFigure> 
</PathGeometry.Figures> 
</PathGeometry> 
</Path.Data> 
</Path> 
</Canvas> 
</Page> 



• XamlPad 




| □ Auto Parse | ► Refresh 


1 




<PathGe srcetry . Figures > 


- ? = 


-hrigureCclle=tion> 


<PathFicure SrarrPcin?"' 




<?athFigure . Segment 3 > 




<PathSe^entCollectj i 




<ArcSeament Size=' 




</ParhSegmsnrCcllec: 




</Pat.hFionire.Seaments: v 


< > 


Done. Markup saved tc "C:\Program Files\Microsoft 


5DKs\Windows\vl.0\Bin\XamlPad_5aved.xamr. 



Figure 11-5: 

Un arc de cercle 



Les segments sont rassembles pour former une figure. L'attribut SartPoint de 
la balise PathFigure permet de defmir le point de depart de la figure. Ensuite, 
les segments definissent le point d'arrivee suivant du trait. C'est pour cela que 
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Ton parle de chemin et non d'une collection de formes. Les autres attributs du 
segment permettent de definir la forme que le trait va prendre. Dans le cas d'un 
arc, c'est l'attribut Size qui va definir la courbure. 

Bien sur nous pouvons appliquer les techniques d' animation vues precedem- 
ment pour animer notre dessin. 

<Page 
xmlns= 

" http : / / schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xmlns:x="http://schemas. mi crosoft.com/winfx/2006/xaml " 
Title="Pagel" Height="122" Width="491"> 
<Page.Triggers> 

<EventTrigger RoutedEvent="Page. Loaded"> 
<EventTrigger.Actions> 
<BeginStoryboard> 
<Storyboard> 
<ColorAnimation 
Storyboard . TargetName="oei 11 " 
Storyboard. TargetProperty= 
"(Ell i pse . Fi 11 ) . (Sol i dCol orBrush . Col or) " 
From="LightBlue" To="Red" 
Duration="00:00:7" 
AutoReverse="True" /> 
<SizeAnimation 
Storyboard. TargetName="bouche" 
Storyboard. TargetProperty="Size" 
From="100,5" To="10,5" 
Duration="00:00:7" 
AutoReverse="True" /> 
</Storyboard> 
</Begi nStoryboard> 
</EventTrigger.Actions> 
</EventTrigger> 
</Page.Triggers> 
<Canvas> 

<Line Xl="150" Yl="50" X2="150" Y2="80" 

StrokeThickness="2" Stroke="Blue"/> 
<E1 1 i pse Canvas. Top="30" Canvas. Left=" 120" 

Height="10" Width="12" StrokeThickness="2" 

Stroke="Bl ue" Fi 1 1 ="LightBl ue"/> 
<E1 1 i pse Name="oeill" Canvas. Top="30" 

Canvas. Left=" 165" Height="10" Width="12" 

StrokeThickness="2" Stroke="Blue" 

Fill="LightBlue"/> 
<E1 1 ipse Canvas. Top="10" Canvas. Left="90" 

Height="120" Width="120" StrokeThickness="2" 

Stroke="Blue"/> 
<Path Stroke="Blue" StrokeThickness="2"> 
<Path.Data> 
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<PathGeometry> 




<PathGeometry . Fi gures> 




<PathFigure StartPoint= 


"120,100"> 


<ArcSegment x:Name= 


"bouche" 


J 1 Z.C 1U) J ru MIL 


180 100"/^ 


</PathFigure> 


</PathGeometry.Figures> 




</PathGeometry> 




</Path.Data> 




</Path> 




</Canvas> 




</Page> 





II existe toute une panoplie de segments utilisables : ArcSegment, Bezi erSeg- 
ment, LineSegment, PolyBezierSegment, PolyLineSegment, PolyQuadraticBe- 
zi erSegment, Quadrati cBezi erSegment. 



<Page 
xmlns= 

" http : / /schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nfx/2006/xaml " 
Title="Pagel" Height="122" Width="491"> 
<Canvas> 

<Line Xl="150" Yl="50" X2="150" Y2="80" 
StrokeThickness="2" Stroke="Blue"/> 
<E1 1 ipse Canvas. Top="30" Canvas. Left=" 120" 
Height="10" Width="12" StrokeThickness="2" 
Stroke="Bl ue" Fi 1 1 ="Li ghtBl ue"/> 
<E1 1 i pse Name="oeill" Canvas. Top="30" 
Canvas. Left="165" Height="10" Width="12" 
StrokeThickness="2" Stroke="Blue" 
Fill =" Li ghtBl ue"/> 
<E1 1 ipse Canvas. Top="10" Canvas. Left="90" 
Height="120" Width="120" StrokeThickness="2" 
Stroke="Blue"/> 
<Path Stroke="Blue" StrokeThickness="2"> 
<Path.Data> 
<PathGeometry> 

<PathGeometry.Figures> 

<PathFigure StartPoi nt=" 120, 100"> 
<ArcSegment x:Name="bouche" 
Size="10,5" Point="180,100"/> 
</PathFigure> 
<PathFigure StartPoi nt=" 120, 18"> 
<ArcSegment Size="10,5" 
Point="140,137> 
<Bez i erSegment Poi nt 1= " 140 , 15 " 
Point2="150,25" Point3="180,20"/> 
<LineSegment Point="170,0"/> 
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<PolyLineSegment 

Points="167, 10, 164,0,161, 10, 158,0,155, 10, 152,0,149, 10, 
146,0,143,10,140,0,137,11,134,0,131,13,128,0,125,16, 
122,0, 120, 18"> 
</PolyLineSegment> 
</PathFigure> 
</PathGeometry.Figures> 
</PathGeometry> 
</Path.Data> 
</Path> 
</Canvas> 
</Page> 




Done. Markup saved tc "C:\Program Files\Microsoft 
SDfe\Wmdows\vl.C\Bin\XamlPad_Saved.xamr. 



Figure 11-6: 

Divers segments 



PathGeometry n'est pas la seule balise que vous puissiez placer dans le nceud 
Path. Data. Vous pouvez par exemple utiliser LineGeometry, RectangleGeometry 
ou encore El l ipseGeometry. Ces classes sont tres semblables aux formes 
correspondantes dont nous avons deja parle excepte qu'elles ont besoin d'une 
autre classe comme Path pour pouvoir etre affichees. 



11.2 Le dessin en 3D 

XAML ne se contente pas de dessiner en deux dimensions mais est egalement 
capable de dessiner en trois dimensions. Attention, pour pouvoir utiliser ces 
fonctionnalites, il est necessaire de posseder des notions de dessin en trois 
dimensions. XAML vous fournit en effet les instructions adequates mais il est 
necessaire de connaitre les techniques specifiques a ce domaine d'activite. C'est 
pourquoi nous nous limiterons a quelques notions de base et a un exemple simple. 

Tout d'abord, pour realiser des elements en 3D, vous devez definir un conteneur 
specifique, il s'agit de Viewport3D. II sera alors necessaire de definir deux 
parties distinctes. D'une part la camera, qui determine la projection 3D sur la 



Le guide du codeur • 323 



I Le dessin 



surface 2D, c'est-a-dire Tangle de vue sur le modele, d'autre part le modele 
lui-meme. Dans l'exemple, le modele est compose de deux sous-modeles : tout 
d'abord un eclairage. Celui-ci va permettre de definir un spot lumineux qui va 
avoir pour effet de modifier l'eclairage (les couleurs) du contenu selon Tangle 
avec lequel il est presente. Par exemple, dans le cas d'un cube, la face dirigee 
vers le spot sera plus lumineuse. Ensuite, nous definissons le contenu reel de la 
scene : ici un cube. Bien sur, vous pouvez multiplier les objets presentes et 
meme placer plusieurs spots. 

Pour definir la camera, nous allons utiliser la balise Prespecti veCamera et 
definir Tangle de vue grace aux proprietes LookDi recti on et UpDi recti on. 
L'attribut Position definit la position de la camera dans la scene. Les positions 
et les directions sont donnees sous forme d'un point 3D (classe Point3D), 
c'est-a-dire sous forme d'un systeme de coordonnees sur trois axes, X et Y 
etant les axes habituels alors que Z donne la profondeur. Si Z vaut 0, nous 
retrouvons le plan 2D. 

Pour definir le spot, nous allons utiliser la balise Directional Light. Ici, le spot 
est defini dans le meme sens que la projection de maniere a faire ressortir la 
face avant. La couleur de la lumiere est blanche pour conserver toute sa clarte 
a la scene. 

Le cube lui-meme est construit en deux parties ; d'une part le cube, defini en 
utilisant la balise MeshGeometry3D et en determinant les points de passage, d'autre 
part la surface a afficher sur la forme ainsi definie. Nous afficherons ici une simple 
surface bleue. Vous pourriez tout aussi facilement afficher une image. 

<Page 
xmlns= 

"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x=" http : //schemas .mi crosof t . com/wi nfx/2006/xaml "> 
<DockPanel> 
<Viewport3D> 

<Vi ewport3D . Camera> 

<Perspecti veCamera LookDi recti on="5, -2 , -3" 
UpDi recti on="3, 1,-5" Position="-5,2,3"/> 
</Vi ewport3D . Camera> 
<ModelVisual3D> 

<Model Visual 3D. Children> 
<ModelVisual3D> 

<Model Visual 3D. Content> 

<Directional Light Color="White" 
Direction="5,-3,-2" /> 
</Model Vi sual 3D . Content> 
</ModelVisual3D> 
<ModelVisual3D> 

<Model Visual 3D. Content> 
<GeometryModel 3D> 
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<GeometryModel 3D.Geometry> 

<MeshGeometry3D Posi ti ons=" -0 . 5 
,-0.5,0.5 0.5,-0.5,0.5 -0.5,0.5,0.5 0.5,-0.5,0.5 0.5,0.5 
,0.5 -0.5,0.5,0.5 -0.5,0.5,0.5 0.5,0.5,0.5 -0.5,0.5 
,-0.5 0.5,0.5,0.5 0.5,0.5,-0.5 -0.5,0.5,-0.5 -0.5,0.5 
,-0.5 0.5,0.5,-0.5 -0.5,-0.5,-0.5 0.5,0.5,-0.5 0.5,-0.5 
,-0.5 -0.5,-0.5,-0.5 -0.5,-0.5,-0.5 0.5,-0.5,-0.5 -0.5 
,-0.5,0.5 0.5,-0.5,-0.5 0.5,-0.5,0.5 -0.5,-0.5,0.5 0.5 
,-0.5,0.5 0.5,-0.5,-0.5 0.5,0.5,0.5 0.5,-0.5,-0.5 0.5,0.5 
,-0.5 0.5,0.5,0.5 -0.5,-0.5,-0.5 -0.5,-0.5,0.5 -0.5,0.5 
,-0.5 -0.5,-0.5,0.5 -0.5,0.5,0.5 -0.5,0.5,-0.5"/> 
</Geomet ryModel 3D . Geometry> 
<Geomet ryModel 3D . Materi al > 
<DiffuseMaterial> 

<DiffuseMaterial .Brush> 
<Sol idColorBrush 
Color="Blue" 
Opacity ="1.0" /> 
</DiffuseMaterial .Brush> 
</Di f f useMateri al > 
</GeometryModel 3D. Materi al> 
</GeometryModel 3D> 
</Model Vi sual 3D . Content> 
</ModelVisual3D> 
</Model Visual3D.Chil dren> 
</ModelVisual3D> 
</Viewport3D> 
</DockPanel> 
</Page> 



Ul@[x| 




Done. Markup saved tc "C : '.Frocrsr -iles'. Micro soft 5D<£-',, l .Vindc,'»s\vl.0\Bir 
\Xam I Pad_5a ved .xa m I " . 



Figure 11-7 

Un cube 
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Si vous modifiez par exemple la position de la camera en remplacant -5 par -8, 
vous l'eloignez ainsi de la scene. Le resultat est que le cube se deplace vers le 
bas et vers la droite mais aussi que sa taille se reduit. 



' Auto Pare ► Refresh -'. Courier New 



<Page 

xmlns="*i-rp : / / s enemas .microsof t . com/winf x/2006/x 
xmlns :x="http: //schemas .microscft.com/vn.nfx/200e 



Done. Markup saved to "C:\Program Rles\ Microsoft SD Ks\ Wind ows\vl.0\ Bin 
\Xam I Pad_Sa ved .xa ml" . 



< Figure 11-8 : 

Un cube 



Par contre en transformant le 3 en 8 dans la balise UpDi recti on, vous allez 
modifier Tangle de vue. 



• XamlPad 




EES 


* Auto Parse | ► Refresh 


A Cotxier New " _ 














<PerspectiveCamera LooicDirectior.="S, -2, -3" Up ^ 
< /Vi evp o r 1 3 D - C axe r a > 

V, 


< 




> 


Done. Markup saved to "C:\Program Rles\ Microsoft SD Ks\ Wind cws\vl.0\ Bin 
\XamlPad_Saved .xaml". 



< Figure 11-9 

Un cube 
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A vous de deplacer la camera pour obtenir ce que vous desirez. Bien sur, vous 
pouvez realiser des animations en modifiant ces differents parametres. 

11.3 Checklist 

Les points essentiels qui ont ete vus dans ce chapitre sont : 

■ le dessin en 2D avec les formes comme Ellipse, Rectangle, Polygone... ; 

■ le dessin en 2D en utilisant des suites de segments comme ArcSegment, 
LineSegment, BezierSegment... ; 

■ l' animation de dessin en 2D ; 

■ les bases du dessin en 3D avec Viewport3D, Perspecti veCamera, Direc- 
tional Light, et MeshGeometry3D. 
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Pour parfaire notre maitrise de XAML, il est maintenant temps de realiser un 
exercice complet recapitulant un grand nombre de notions vues parfois en les 
abordant sous un aspect legerement different. Nous simulerons egalement une 
situation de travail collaboratif entre programmeur et designer. 

Nous prendrons comme exemple une calculatrice. C'est une application dont le 
modele metier est simple mais qui offre des possibilites de design nombreuses. 
C'est justement ce qu'il nous faut. 

Le fait de choisir une application simple n'implique pas un certain respect des 
bonnes pratiques. Nous decouperons done notre application en deux couches. 
Nous ne developperons pas de couche de persistance des donnees, qui 
n'apporterait rien a 1' etude du XAML. 

La premiere partie de 1' application sera realisee par le programmeur, qui va 
realiser sa couche metier. Notre couche se limite a une classe qui modelise la 
calculatrice. L'objectif n'etant pas l'etude de la modelisation, nous allons faire 
rapide et simple. Pour faire plaisir a ceux, nombreux, qui preferent C# mais 
aussi pour vous demontrer qu'il n'y a aucune difference dans XAML quand il 
est utilise avec C# plutot que VB.NET, nous realiserons, vous l'aurez compris, 
le code .NET avec C#. 

En premier, il faut creer une application WinFX Windows. Vous pouvez choisir 
un autre modele mais vous devrez alors adapter la balise root du XAML et la 
definition de la classe dans le code associe. 

using System; 

using System. Col lections. Generic; 
using System. Text; 

namespace Calculatrice 

{ 

class CalcBase 
{ 

Le membre termel est destine a recevoir le resultat affiche sur la calculatrice. 
Pour maintenir l'integrite du systeme, cette valeur ne peut etre modifiee que par 
la classe elle-meme. C'est pourquoi la propriete qui y donne acces est en lecture 
seule. 

private decimal termel; 
public decimal Termel 

{ 

get { return termel; } 

} 



330 • Le guide du codeur 



Realiser- une application complete 



2 



Le membre terme2 est destine a recevoir la valeur qui est entree en vue de 
realiser une operation. Nous aurions pu aussi la remplacer par des parametres 
dans les methodes. 

private decimal terme2; 
public decimal Terme2 
{ 

get { return terme2; } 
set { terme2 = value; } 

} 

Le membre memoi re est destine a recevoir la valeur stockee dans la memoire de 
la calculatrice. L'acces a ce membre se fait uniquement via des methodes. II 
n'est done pas expose a l'exterieur. 

private decimal memoire; 
Le constructeur initialise les variables. 

public CalcBaseQ 

{ 

memoire = 0; 
Reset(); 

} 

La methode Reset modelise l'utilisation de la touche C. 

public void Reset () 

{ 

termel = 0; 
terme2 = 0; 

} 



public void Addition() 

{ 

termel += terme2; 
terme2 = 0; 

} 



public void SoustractionQ 

{ 

termel -= terme2; 
terme2 = 0; 

} 
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public void Multiplication) 

{ 

termel *= terme2; 
terme2 = 0; 

} 



public void DivisionQ 

{ 

if (terme2 != 0) 
{ 

termel /= terme2; 
terme2 = 0; 

} 

} 

La methode AjoutMemoi re modelise l'utilisation de la touche M+. Remarquez 
que c'est le resultat qui est mis en memoire. 

public void AjoutMemoi re () 

{ 

memoire += termel; 

} 

La methode Ef faceMemoi re modelise l'utilisation de la touche MC. 

public void Ef faceMemoi re () 

{ 

memoire = 0; 

} 



La methode Resti tueMemoi re modelise l'utilisation de la touche MR. La valeur 
memoire est restituee dans le deuxieme terme de 1' operation. 

public void Resti tueMemoi re () 

{ 

terme2 = memoire; 

} 



La methode EntreeNouvel 1 eVal eur modelise l'instruction d'une premiere va- 
leur dans un calcul. 

public void EntreeNouvel leVal eur () 

{ 

termel = terme2; 
terme2 = 0; 

} 

} 

} 
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En bonne pratique, a ce stade, nous devrions ecrire les tests unitaires que nous 
aurions du prevoir a l'avance. Exceptionnellement, comme il n'apporte rien a 
l'apprentissage XAML, nous allons les oublier et passer directement a la 
couche de presentation. 

<Window x:Class="Calculatrice.Windowl" xmlns= 
"http://schemas.microsoft.com/winfx/2006/xaml /presentation" 
xml ns : x="http : //schemas .mi crosof t . com/wi nf x/2006/xaml " 
Title="Calculatrice" 
Height="365" Width="455" 
> 

Nous allons utiliser une grille pour placer nos elements. 

<Grid Height="330" Width="440"> 
<Gri d . Col umnDef i ni ti ons> 

<ColumnDefinition Width="0.25*" /> 

<ColumnDefinition Width="0.25*" /> 

<ColumnDefinition Width="0.25*" /> 

<ColumnDefinition Width="0.25*" /> 
</Gri d . Col umnDef i ni ti ons> 
<Gri d . RowDef i ni ti ons> 



<RowDefinition 


Height= 


'0 


14*" 


/> 


<RowDefinition 


Height= 


'0 


14*" 


/> 


<RowDefinition 


Height= 


'0 


14*" 


/> 


<RowDefinition 


Height= 


'0 


14*" 


/> 


<RowDefinition 


Height= 


'0 


14*" 


/> 


<RowDefinition 


Height= 


'0 


14*" 


/> 


<RowDefinition 


Height= 


'0 


14*" 


/> 



</Gri d . RowDef i ni ti ons> 



Pour rendre notre calculatrice un peu originale, nous allons utiliser une zone 
pour le resultat et une autre pour le terme. Notez que terme2 est plus petit que 
resultat, cela permet de garder de la place pour d'autres informations. 

<Label Grid.Row="0" 
Name-'resultat" 
Grid.ColumnSpan="4" 
Margin="5,5,5,5" 
Content="0" 
BorderBrush="Bl ack" 
BorderThickness="l" 
Horizontal ContentAl ignment=" Right" 
Verti cal ContentAl i gnment="Center" 
/> 

<Label Grid.Row="l" 
Name="terme2" 
Grid.Column="l" 
Grid.ColumnSpan="3" 
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Margin="5,5,5,5" 
Content="0" 

Horizontal ContentAl ignment=" Right" 
Verti cal ContentAl i gnment="Center" 
BorderBrush="Bl ack" 
BorderThickness="l" 

/> 

Nous aurons egalement besoin d'afficher un indicateur signalant quand une 
donnee est stockee dans la memoire et allons aussi afficher l'operateur qui a ete 
selectionne. Pour cela nous allons utiliser la cellule laissee libre par terme2. 

<WrapPanel Grid.Row="i"> 
<Label Name="memoireActive" 
Grid.Column="0" 
Margin="5,5,5,5" 
Content="" 

Verti cal ContentAl i gnment="Center" 
VerticalAl ignment="Center" 
Width="40" 

/> 

<Label Grid.Row="l" 
Name="operateur" 
Grid.Column="0" 
Margin="5,5,5,5" 
Content="" 

Verti cal ContentAl ignment="Center" 
VerticalAl ignment="Center" 

/> 

</WrapPanel> 

II nous reste maintenant a definir les boutons pour les differentes touches. Pour 
chacun d'entre eux, nous devrons associer une methode a l'evenement Click. 
Nous definirons ulterieurement les methodes dans la classe. 

<Button Grid.Row="2" 

Grid.Column="0" 

Content="MC" 

Click="clickOnMC"/> 
<Button Grid.Row="2" 

Grid. Col umn="l" 

Content="MR" 

Click="clickOnMR"/> 
<Button Grid.Row="2" 

Grid.Column="2" 

Content="M+" 

CI ick="cl ickOnMemoirePlus"/> 
<Button Grid.Row="2" 
Grid.Column="3" 



334 • Le guide du codeur 



Realiser une application complete 



Content="+" 

CI i ck="cl i ckOnPl us "/> 
<Button Grid.Row="3" 

Grid.Column="0" 

Content="l" 

Click="clickOnl"/> 
<Button Grid.Row="3" 

Grid.Column="l" 

Content="2" 

C1ick="c1ick0n2"/> 
<Button Grid.Row="3" 

Grid. Col umn="2" 

Content="3" 

Click="click0n3"/> 
<Button Grid.Row="3" 

Grid. Col umn="3" 

Content="-" 

CI ick="cl ickOnMoins"/> 
<Button Grid.Row="4" 

Grid.Column="0" 

Content="4" 

Click="click0n4"/> 
<Button Grid.Row="4" 

Grid.Column="l" 

Content="5" 

Click="click0n5"/> 
<Button Grid.Row="4" 

Grid. Col umn="2" 

Content="6" 

Click="click0n6"/> 
<Button Grid.Row="4" 

Grid. Col umn="3" 

Content="*" 

CI ick="cl ickOnMul tipl ication"/> 
<Button Grid.Row="5" 

Grid.Column="0" 

Content="7" 

Click="click0n7"/> 
<Button Grid.Row="5" 

Grid.Column="l" 

Content="8" 

Click="click0n8"/> 
<Button Grid.Row="5" 

Grid.Column="2" 

Content="9" 

Click="click0n9"/> 
<Button Grid.Row="5" 

Grid.Column="3" 

Content="/" 

CI ick="cl ickOnDivision"/> 
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<Button Grid.Row="6" 

Grid.Column="0" 

Content="C" 

Click="clickOnC"/> 
<Button Grid.Row="6" 

Grid. Col umn="l" 

Content="0" 

Click="clickOnO"/> 
<Button Grid.Row="6" 

Grid.Column="2" 

Content=" . " 

Click="clickOnPoint"/> 
<Button Grid.Row="6" 
Grid.Column="3" 
Content="=" 
CI ick="cl i ckOnEgal "/> 
</Grid> 
</Wi ndow> 

Maintenant que le code XAML est ecrit, il nous reste a completer le code .NET 
associe. 

using System; 

using System. Col lections. Generic; 

using System. Text; 

using System. Windows; 

using System. Windows. Controls; 

using System. Windows. Data; 

using System. Windows. Documents; 

using System. Windows. Input; 

using System. Windows. Media; 

using System. Windows. Media. Imaging; 

using System. Windows. Shapes; 

namespace Calculatrice 

{ 

/// <summary> 

/// Interactions logiques pour Windowl.xaml 
/// </summary> 

public partial class Windowl : Window 
{ 

Nous devons definir un membre de type Cal cBase (notre objet metier). 

private CalcBase calc; 
public Windowl () 

{ 

calc = new CalcBaseQ ; 
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Initial izeComponentQ ; 

} 

La methode suivante realise un Reset de l'objet metier et rafraichit l'affichage. 

private void clickOnC (object sender 

, RoutedEventArgs e) 

{ 

calc. Reset () ; 
operateur. Content = ""; 
refreshVal ues () ; 

} 

Les cinq methodes suivantes provoquent le calcul et changent 1' operateur pour 
la prochaine operation. 

private void cl ickOnEgal (object sender 

, RoutedEventArgs e) 

{ 

operateQ ; 

operateur. Content = ""; 

} 

private void clickOnPl us (object sender 

, RoutedEventArgs e) 

{ 

operateQ ; 

operateur. Content = "+"; 

} 

private void clickOnDivision(object sender 

, RoutedEventArgs e) 

{ 

operateQ ; 

operateur. Content = "/"; 

} 

private void clickOnMoins (object sender 

, RoutedEventArgs e) 

{ 

operateQ ; 
operateur. Content = 

} 

private void clickOnMultiplication(object sender 

, RoutedEventArgs e) 

{ 

operateQ ; 

operateur. Content = "*"; 



Nous avons ensuite les methodes liees aux boutons concernant la memoire. 
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private void cl ickOnMR(object sender 

, RoutedEventArgs e) 

calc.RestitueMemoire() ; 
refreshVal ues() ; 

private void cl ickOnMC (object sender 

, RoutedEventArgs e) 

calcEffaceMemoireQ ; 
memoireActive. Content = ""; 

private void clickOnMemoirePl us (object sender 

, RoutedEventArgs e) 

calcAjoutMemoireQ ; 
memoireActive. Content = "M"; 



Les clics sur les boutons 0 a 9 ainsi que le point provoquent uniquement une 
modification du label terme2. 



private void clickOnl (object sender 
, RoutedEventArgs 


e) 


addDigit('T'); 




private void click0n2 (object sender 
, RoutedEventArgs 


e) 


addDigit("2") ; 




private void click0n3 (object sender 
, RoutedEventArgs 


e) 


addDigit("3") ; 




private void click0n4(object sender 
, RoutedEventArgs 


e) 


addDigit("4") ; 




private void click0n5 (object sender 
, RoutedEventArgs 


e) 


addDigit("5") ; 




private void click0n6 (object sender 
, RoutedEventArgs 


e) 
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addDigit("6"); 

private void cl ick0n7 (object sender 

, RoutedEventArgs e) 

addDigit("7"); 

private void click0n8 (object sender 

, RoutedEventArgs e) 

addDigit("8"); 

private void click0n9 (object sender 

, RoutedEventArgs e) 

addDigit("9"); 

private void cl ickOnO (object sender 

, RoutedEventArgs e) 

adduigit("0"); 

private void cl ickOnPoint (object sender 

, RoutedEventArgs e) 

addDigit (","); 



^ention 

▼ Probleme de localisation 

Le programme est prevu non pas pour tous les environnements mais uniqu 
ment pour une configuration avec la virgule decimale. 



private void addDigit(string car) 

{ 

if (terme2. Content. ToStringO == "0") 
{ 

terme2. Content = car; 

} 

el se 

{ 

terme2. Content += car; 
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La methode suivante determine quelle operation doit etre demandee a notre 
objet metier. 





private void operate () 

{ 

calc.Terme2 = Convert. To-Decimal (terme2. Content) ; 
swi ten (operateur . Content .ToStri ng () ) 

{ 






case "+": 




{ 

calc.AdditionQ; 
break; 

} 




case 




{ 

calc.SoustractionQ ; 
break; 

} 




case "/" : 




{ 

calc.DivisionO; 
break; 

} 




case "*": 




{ 

calc.MultiplicationO; 
break * 




} 

default: 




{ 

if (calc.Terme2 != 0) 




{ 

cal c . EntreeNouvel 1 eVal eur() ; 




} 

break; 

} 




} 

refreshVal ues () ; 




} 

private void refreshVal ues () 


} 


{ 

resultat. Content = cal c.Termel. ToStri ng () ; 
terme2. Content = calc.Terme2.ToString() ; 

} 

\ 



Notre code est maintenant termine. Si nous passons en mode design, nous recevrons 
l'ecran suivant (ici 1'ecran presente sous Visual Studio 2005 Team Edition). 
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M Calculatrice - Microsoft Visual Studio 



File Edit View Project Build Debug Data Tools Test Window Community Help 
^ - ciJ ' lj J & -tJ 1 - P " -J ► Debug - Any CPU 



Start Page CalcBase.cs Windowl.Kaml 



[jT] Design | T] Xaml Source 



renxi 



t X Solution Explorer - Soluti... ▼ 9 X 

^ Solution 'Calculatrice' (1 project) 
- JjH Calculatrice 

+ ja, Properties 
ffl l=£j References 
SI (jjj App.xaml 

c l] CalcBase.cs 
i+j (§3 Window l.xaml 
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▲ Figure 12-1 : Le code vu en mode design 
Nous pouvons maintenant tester 1' application, qui est totalement fonctionnelle. 



I Calculatrice Q@® 



A Figure 12-2 : La calculatrice dans son design d'origine 
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Le programmeur a developpe la calculatrice en lui donnant une interface 
sombre mais parfaitement fonctionnelle. II peut maintenant passer la main au 
designer, qui va ameliorer la presentation mais sans devoir intervenir dans les 
mecanismes. Pour nous, il s'agira d'un changement de role. 

Dans cette phase, nous n'interviendrons plus que sur le code XAML. 

La premiere etape consistera a changer le fond d'ecran ainsi qu'a donner au 
cadre Windows un aspect boite d'outils. Nous allons utiliser les proprietes 
WindowStyle et Background de la class Window. 

<Window x:Class="Calculatrice.Windowl" xmlns= 
" http : / /schemas .mi crosof t . com/wi nf x/2006/xaml /presentati on " 
xml ns : x=" http : //schemas .mi crosof t . com/wi nfx/2006/xaml " 
Title="Calculatrice" 
Height="365" Width="455" 
Wi ndowStyl e="Tool Wi ndow" 
> 

<Wi ndow. Background > 

<LinearGradientBrush StartPoint="0,0" 
EndPoint="l,l"> 
<Li nearGradi entBrush . Gradi entStops> 

<GradientStop Color="Blue" Offset="0" /> 
<GradientStop Color="White" Offset="l" /> 
</Li nearGradi entBrush . Gradi entStops> 
</Li nearGradi entBrush> 
</Window.Background> 

Comme fond, nous avons realise un degrade bleu dans la diagonale de la fenetre. 
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A Figure 12-3 : Degrade en fond de fenetre 



Ensuite, nous allons agrandir la taille de l'operateur et de l'indicateur pour la 
memoire. 
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<Label 

Grid. Col umn="0" 
Name="memoireActive" 
Margin="5,5,5,5" 
Content="" 

Vertical ContentAl ignment="Center" 
VerticalAl ignment="Center" 
Width="40" 

TextBlock.FontSize="24" 

TextBl ock. FontWeight="Ul traBl ack" 

TextBl ock. Foreground^' Red" 

/> 

<Label Grid.Row="l" 
Name="operateur" 
Grid. Col umn="0" 
Margin="5,5,5,5" 
Content="" 

Vertical ContentAl ignment="Center" 

VerticalAl ignment="Center" 

TextBlock.FontSize="24" 

TextBl ock. FontWeight="Ul traBl ack" 

TextBl ock . Foreground="Whi te" 

/> 




■< Figure 1 2-4 : L'operateur et 
I'indicateur memoire 



Passons maintenant a quelque chose de plus consistant, la presentation des 
boutons. Pour modifier cette derniere, nous allons utiliser un style. Le style sera 
automatiquement applique a tous les boutons. La presentation du bouton est 
completement transformee et remplacee par un controle Border dont le fond est 
realise avec un degrade radial. La balise ContentPresenter permet de gerer le 
texte contenu. 

Le code suivant doit etre insere apres la balise de fin Window. Background. 

<Window.Resources> 

<Style TargetType="{x:Type Button} "> 
<Setter Property= "Button . Tempi ate"> 
<Setter.Value> 

<Control Tempi ate TargetType="{x:Type Button}"> 
<Border BorderThickness="2" 
CornerRadius="25" 
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Width="100" Height="40"> 
<Border.Background> 

<RadialGradientBrush > 
<Radi al Gradi entBrush . Gradi entStops> 
<GradientStop 
Color="LavenderBl ush" 
Offset="0" /> 

<Gradi entStop Col or="Sl ateGray " 
Offset="l" /> 
</Radi al Gradi entBrush .Gradi entStops> 
</Radi al Gradi entBrush> 
</Border.Background> 
<ContentPresenter 
VerticalAl ignment="Center" 
Hori zontal Al i gnment="Center" 
TextBl ock. FontWei ght="Medi um" 
TextBlock.FontSize="12" /> 
</Border> 
</Control Tempi ate> 
</Setter.Value> 
</Setter> 
</Styl e> 
<Window.Resources> 




A Figure 12-5 : Les nouveaux boutons 



Apres les boutons, il est temps de s'attaquer au changement des Label. Nous 
allons a nouveau utiliser un style mais nous ne pourrons cette fois l'appliquer 
automatiquement car seuls deux Label doivent etre modifies. Nous utiliserons 
done un style nomme. 

Le code suivant doit etre insere a la fin du nosud contenant les ressources de 
Wi ndow. 
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<Style x:Key="Affichage"> 

<Setter Property=" Label .Tempi ate"> 
<Setter.Value> 

<Control Tempi ate TargetType="{x:Type Label}"> 
<Border CornerRadius="25"> 
<Border . Background> 
<LinearGradientBrush> 

<Li nearGradi entBrush . Gradi entStops> 
<GradientStop x:Name=" debut" 
Color="LightGray" Offset="0" /> 
<GradientStop x:Name="fin" 
Color="White" Offset="l" /> 
</Li nearGradi entBrush . Gradi entStops> 
</Li nearGradi entBrush> 
</Border . Background> 

<ContentPresenter Vertical Al ignment=" Center" 
Horizontal Al ignment="Right" 
Margin="0, 0,15,0" TextBlock.FontSize="14" 
TextBl ock. FontWei ght="Ul traBl ack"/> 
</Border> 
</Control Tempi ate> 
</Setter.Value> 
</Setter> 
</Style> 

Nous devons maintenant specifier au niveau des Label resultat et terme2 
qu'ils doivent utiliser ce nouveau style. Pour cela, il suffit d'ajouter dans la 
balise l'attribut suivant : 

Style="{StaticResource Affichage} " 
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▲ Figure 12-6 : Le nouvel affichage des valeurs 



Le guide du codeur • 345 




Realiser une application complete 



La presentation commence desormais a prendre forme. Nous allons maintenant 
realiser quelques petites finitions gadgets pour totalement personnaliser notre 
interface. Comme vous allez le voir, les details sont souvent aussi les elements 
les plus couteux en temps de mise en oeuvre. 

L'idee de ce qui va suivre est de mettre en avant le bouton sur lequel 
l'utilisateur est positionne. La taille du texte affiche va etre agrandie pour le 
bouton sur lequel la souris est positionnee. Au lieu de se contenter d'un simple 
passage d'un etat a l'autre, nous allons realiser un effet de fondu. 

Pour realiser cela, nous aurons evidemment besoin d'utiliser les triggers et les 
animations. 

<Window.Resources> 

<Style TargetType="{x:Type Button}"> 
<Setter Property= "Button . Tempi ate"> 

<ContentPresenter VerticalAl ignment="Center" 
Horizontal Al ignment="Center" 
TextBl ock . FontWei ght= "Medi urn" 
TextBlock.FontSize="12" 
x:Name="contentString" /> 

Nous devons nommer l'objet ContentPresenter car nous allons lui appliquer 
des transformations. 

</Border> 

<Control Tempi ate . Tri ggers> 
Le trigger sera declenche lorsque la propriete IsMouseOver sera fixee a true. 

<Tri gger Property=" IsMouseOver" 
Value="true"> 

Le trigger est compose de deux parties, une qui sera declenchee lorsque la 
valeur passe a true, l'autre, lorsque la valeur devient autre, en l'occurrence 
false. 

<Trigger.EnterActions > 
<Begi nStoryboard> 
<Storyboard> 
< DoubleAnimation 

Storyboard.TargetName="contentString" 
Storyboard . Target Property = 

"(TextBl ock. FontSize)" 
From="12" To="24" Duration="0:0:0.5"/> 
</Storyboard> 
</Begi nStoryboard> 
</Tri gger . EnterActi ons> 
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Lors de la sortie, c'est l'animation inverse qui est realisee. 



<Trigger.ExitActions > 
<Begi nStoryboard> 
<Storyboard > 
<DoubleAnimation 

Storyboard.TargetName="contentString" 
Storyboard.TargetProperty= 

"(TextBlock.FontSize) " 
From="24" To="12" Duration="0:0:0.5"/> 
</Storyboard> 
</Begi nStoryboard> 
</Trigger.ExitActions> 
</Trigger> 
</Control Tempi ate . Tri ggers> 
</Control Tempi ate> 




Figure 12-7 : La mise en evidence 
du bouton 

Pour aller plus loin dans cette mise en evidence, nous allons egalement faire 
passer le poids du caractere de Medium a UltraBlack et inversement. 

Pour cela, nous devons modifier le trigger precedemment defini en y ajoutant 
une nouvelle animation a 1' entree et a la sortie. 

Le trigger d' entree devient maintenant : 

<Trigger.EnterActions> 
<BeginStoryboard> 
<Storyboard> 

<DoubleAnimation 

Storyboard.TargetName="contentStri ng" 
Storyboard.TargetProperty=" (TextBlock.FontSize) " 
From="12" To="24" Duration="0:0:0.5"/> 



II s'agit d'une propriete qui doit recevoir une valeur statique d'une structure. 
Nous devons done utiliser les classes ObjectAnimationUsingKeyFrames et 
Di screteObjectKeyFrame. 

<ObjectAnimationUsingKeyFrames 

Storyboard.TargetName="contentString" 

Storyboard . Target Property = " (TextBl ock . FontWei ght) " 

> 

<Di screteObjectKeyFrame 
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KeyTime="0:0:0" 

Value="{x:Static FontWeights. Medium} " /> 
Pour fixer la valeur, il faut utiliser la syntaxe particuliere avec x: Static. 

<DiscreteObjectKeyFrame 
KeyTime="0:0:0.5" 

Value="{x:Static FontWeights. UltraBlack}" /> 
</ObjectAnimationUsingKeyFrames> 
</Storyboard> 
</Begi nStoryboard> 
</Tri gger . EnterActi ons> 

Quant a lui, le trigger de sortie devient : 

<Tri gger . Exi tActi ons> 
<BeginStoryboard> 
<Storyboard> 

<DoubleAnimation 

Storyboard. TargetName="contentString" 
Storyboard . TargetProperty=" (TextBl ock . FontSi ze) " 
From="24" To="12" Duration="0:0:0.5"/> 
<ObjectAnimationUsingKeyFrames 
Storyboard. TargetName="contentString" 
Storyboard. TargetProperty=" (TextBl ock. FontWeight)" 
> 

<DiscreteObjectKey Frame 
KeyTime="0:0:0" 

Value="{x:Static FontWeights. UltraBlack}" /> 
<DiscreteObjectKey Frame 
KeyTime="0:0:0.5" 

Value="{x:Static FontWeights. Medium} " /> 
</0b j ectAn i mat i onUs i ngKey Frames> 
</Storyboard> 
</BeginStoryboard> 
</Tri gger . Exi tActi ons> 




Pour terminer, nous allons ajouter un effet sonore. Un clic sera emis lorsque les 
boutons de la calculatrice seront utilises. Plutot qu'ajouter cela dans le style, 
nous allons ajouter un trigger au niveau de la grille. II s'agira d'un Event 
Trigger place grace a la propriete RoutedEvent sur l'evenement Button. CI ick. 
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<Grid Height="330" Width="440"> 
<Grid.Tn'ggers> 
<EventTrigger RoutedEvent=" Button. CI ick"> 
<EventTrigger.Actions> 

La balise SoundPlayerAction joue le fichier sonore specifie dans la source. 
<SoundPl ayerAction 

Source="c:\windows\media\Windows XP Infobulle.wav" 

/> 

</EventTrigger.Actions> 
</EventTrigger> 
</Grid.Tn'ggers> 




▲ Figure 12-9 : L'exemple complet 



Nous sommes maintenant au bout de cet exercice. Comme vous avez pu le 
constater, le fait d' avoir utilise C# n'a rien change au niveau XAML. Pour sa 
part, le designer n'a a aucun moment eu besoin d'acceder au code .NET. 

12.1 Checklist 

Dans le cadre de cet exercice, les notions principales vues ou revues sont : 

■ l'utilisation d'une grille pour positionner les controles ; 

■ la gestion des evenements ; 

■ l'utilisation des styles ; 
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■ la realisation des degrades avec les classes de type GradientBrush ; 

■ la modification de la presentation d'un controle en utilisant Control 
Template et Control Presenter ; 

■ l'utilisation des triggers et particulierement en utilisant EnterActions et 
ExitActions ; 

■ l'utilisation des triggers de type EventTrigger ; 

■ l'utilisation des animations et tout particulierement des animations sur des 
proprietes de type object et des valeurs de type statique. 
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13.1 XAML sur le Web 

Si vous recherchez des informations sur le Web, voici quelques bonnes 
adresses. Malheureusement, nombreuses parmi elles sont en anglais. 

Tout d'abord, l'incontournable, le site officiel de Microsoft dedie a la techno- 
logie Framework 3.0, qui inclut WPF. 




▲ Figure 13-1 : http://msdn.microsoft.com/winfx/ 



Toujours sur MSDN, vous pourrez retrouver l'incontournable aide en ligne. Le 
lien donne pointe sur Microsoft France mais, a l'heure actuelle, la documen- 
tation est toujours en anglais. 



ms*, 

a i, th #■ Mi cm :■. n 

m| . ...... .. 


Welcome (o the Wndowi SDK 











▲ Figure 13-2 : http://windowssdk.msdn.microsoft.com/fr-fr/library/ 
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Si vous rencontrez des problemes avec WPF et que vous vous debrouilliez en 
anglais, vous pouvez utiliser le Forum officiel. 





msdn. 


BB i— Q-— i 





















▲ Figure 13-3 : http://forums.microsoft.com/MSDN/default.aspx9ForumGrouplD 

=24&SitelD=1 

N'oubliez pas l'autre site sur le Framework 3.0. II recele un grand nombre 
d'exemples complets sur les differentes techniques de WinFX. Malgre son 
adresse, il s'agit bel et bien d'un site made in Microsoft. 




A Figure 13-4 : http://wpf.netfx3.com/ 
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Vous pouvez aussi retrouver WPF en video avec Channel 9. Sur ce site, vous 
retrouverez des interviews et des conferences sur le sujet. C'est en general dans 
ces interviews ou dans les blogs des membres de l'equipe de developpement 
que vous trouverez les informations les plus recentes. 



«._._. 




▲ Figure 13-5 : http://channel9.msdn. com/Media/?TaglD=2 

En ce qui concerne les blogs, il n'y a pas de lien particulier, a vous d'utiliser 
la fonction de recherche. Vous pouvez par exemple essayer de chercher sur 
XAML ou encore WPF. 



msdn 
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A Figure 13-6 : http://blogs.msdn.com/default.aspx 
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Heureusement, Microsoft France met egalement a notre disposition un nombre 
important d' informations depuis son site. Le principal site de Microsoft France 
parlant du sujet est le site dedie a Windows Vista. 





A Figure 13-7 : http://www.microsoft.com/france/msdn/windowsvista 

/default, mspx 

Ne ratez pas egalement les Webcast en francais qui vous y sont proposes. 
Attention, pour visualiser ces Webcast, une inscription est obligatoire ! 




A Figure 13-8 : http://www.microsoft.com/france/msdn/webcasts 
/webcasts-DevWindows.mspx 
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Dans les deux sites cites ci-dessus, vous verrez souvent apparaitre le nom de 
Mitsu Furuta, relation technique avec les developpeurs. Son blog est incon- 
sumable pour rester informe de l'actualite. 




ni«M47) 
■ ■■>■ . .-"* 1 



A Figure 13-9 : http://blogs.microsoft.fr/mitsufu/ 

Microsoft n'est pas le seul a fournir de 1'information sur le sujet. Les sites 
communautaires sont aussi une bonne source d' informations. Les articles que 
vous y trouverez sont souvent plus adaptes pour un debutant ou plus cibles a 
une problematique particuliere. lis offrent en plus generalement un forum ou 
vous pourrez poser vos questions. 

Le premier d'entre eux que je voudrais citer est Developpez.com. Bien 
qu'il n'y ait pas de rubrique specifique a WinFX, vous y retrouverez des 
articles interessants ecrits par les membres de la redaction et par exemple 
un tres bel article de Thomas Lebrun (http://morpheus.developpez.com/ 
windows-presentation-foundation/). Le forum est tres frequente et, si vous avez des 
questions, vous y obtiendrez tres certainement la reponse. De nombreux blogs 
vous tiendront informe de l'actualite informatique en general et done de celle 
liee a XAML aussi. Vous y trouverez egalement un espace TV ou vous pourrez 
entre autres visionner les Devdays 2006, dans lesquels il a ete abondamment 
question de WPF. 
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Trouver le bug dans le code 




La 7V gratutte des developpeurs francophones 



▲ Figure 13-10 : http://dotnet.developpez.tv/devdays200B/ 

Le site Asp-Php.net a quant a lui cree une rubrique a part entiere pour la 
technologie XAML. Cette rubrique est encore peu fournie, gageons qu'elle va 
s'etoffer au fil du temps et deviendra rapidement une tres bonne source 
d' information. 



til (J) i 




▲ Figure 13-11 : http://www.asp-php.net/tutorial/xaml/index.php 
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Si vous voulez avoir un apercu rapide de ce qui existe sur le Web concernant 
XAML, vous pouvez vous rendre sur le site Dotnet-news.com et faire une 
recherche sur XAML. Bien sur, la liste ne sera pas exhaustive mais, toutefois, 
les principaux sites communautaires y sont references. 




«'-~ 0«?«B >oQ8*B— »> 




A Figure 13-12 : http://www.dotnet-news.com/gma/XAML 



En ce qui concerne les sites communautaires anglophones, nous retrouvons le 
tres classique Code Project, ou vous pourrez d'ores et deja trouver un grand 
nombre de ressources. 

to- I*— *■ < B P a» [ 

CjOO 3 ->C *- * 




A Figure 13-13 : http://www.codeproject.com/ 
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Mais n'hesitez pas a vous rendre sur le site de XAMLShare, beaucoup plus 
prometteur encore en terme de partage de ressources. II regorge deja de code 
tres interessant dont vous pourrez vous inspirer pour resoudre les problemes 
que vous rencontrerez. 



3 XAMLshare.com: The XAML Wiki! - Microsoft Internet Explorer 



Fichier Edition Affichage Favoris Outils ? 



If 



Q Precede-to • jc] ^ y ' ■ Rechercher ^ Favoris $2) 0- w| - , ft 

Adresse ^) hr.tp;//xamlshare,com/ vj Q OK Lien; 



Find and share "Avalon" controls! 



lJ 



Category: [All] 



What is this site? 



Directory 

AnimationEffects 
J Animations 
J Buttons 
JCheckBones 

ComboBoxes 

CustomControls 
J Expanders 
J Labels 
JListBoxes 
I J Menus 

Navigation 
J Objects 
13 Other 
JProgressBars 

ScrollBars 
J Sliders 



XAMLshare is a central place for designers, developers, or anyone else to find 
and share XAML samples, controls, and styles for user interfaces based on 
Microsoft "Avalon". Look around to learn what "Avalon" and XAML can do! 

Seethe most teceiit additions to the site heie. 

Go ahead and find, edit, or add any relevant content that helps us leverage 
each other's efforts. 

XAMLshare is a Wiki (created with FiexWiki and similar to PlNVOKE.NET), 
enabling users like you (yes, you) to freely and easily contribute to the 
repository. New to Wikis? Try the Playground to experiment with the editing 
process. Enjoy! 

- Adam Nathan 



e 



£ Internet 



A Figure 13-14 : http://xamlshare.com/ 

Cette liste n'est evidemment pas exhaustive et est de plus susceptible d'evoluer 
fortement avec le temps. Toutefois, ces adresses devraient vous permettre d'une 
part de suivre l'actualite liee a XAML, qui va tres probablement rester tres 
abondante jusqu'a la sortie de Visual Studio 2007 et du Framework 3.0, et 
d'autre part de trouver des articles et des exemples ainsi qu'une assistance de 
la communaute qui ira croissante avec le temps et 1' experience des uns et des 
autres. Quant a moi, mon site se trouve a l'adresse jab.developpez.com. 



13.2 Glossaire 

Dans ce glossaire, vous trouverez la definition de termes rencontres dans ce 
livre mais egalement de termes que vous rencontrerez dans l'aide de WinFX et 
qui semblaient pertinents d'expliquer. 
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API : Abreviation anglaise d' Application Program Interface. II s'agit d'un 
ensemble de fonctions et/ou de classes permettant d'interagir avec une autre 
application. Windows pouvant etre considere comme une application, il possede 
son propre API. 

ASP.NET : Technologie de Microsoft faisant partie du Framework .NET et 
destinee a construire des applications web. L' application est executee sur le 
serveur et genere du contenu HTML qui est envoye vers le client. Le client doit 
uniquement disposer d'un navigateur. La logique du programme peut etre ecrite 
dans n'importe quel langage .NET comme C# ou VB.NET. 

Assembly : Un assembly est un ensemble de fichiers deploye comme une unite 
et compile en un bloc. Generalement, les notions d' assembly et de dll se 
confondent. 

Attribut : II s'agit d'une propriete d'une classe ou, dans le cadre XML, d'une 
propriete du nceud XML. 

Balise : Une balise est un element permettant de structurer un fichier XML dans 
notre cas. II existe deux types de balises : une balise ouvrante et une balise 
fermante. 

BAML : Abreviation anglaise de Binary Application Markup Language. Objet 
binaire obtenu apres compilation d'un fichier XAML. 

Classe : C'est un ensemble de proprietes et de methodes regroupees dans une 
meme entite et qui sont en relation avec un meme concept. Une classe est une 
entite abstraite qui sert de definition pour les objets. On peut faire le 
rapprochement entre les concepts de classe et d' objet et les concepts de type de 
donnees et de donnee. 

CLR : Abreviation anglaise de Common Language Runtime. C'est le moteur 
d' execution des applications .NET. En effet, apres compilation, le code .NET 
est transforme en code intermediate MSIL et non en code natif. 

Code-Behind : Code .NET (VB.NET, C#...) contenant la classe qui implemente 
la logique pour un fichier XAML. 

Code manage : Code execute par la CLR et non directement par le systeme 
d' exploitation. 

Code non manage : Code execute directement par le systeme d' exploitation. II 
est aussi appele code natif. 

Collection : Ensemble d'objets, de donnees generalement du meme type. 

Controle : C'est un composant du framework represente par une classe et qui 
offre des capacites en terme d'interface utilisateur. Par exemple une TextBox. 
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Courbe de Bezier : Courbe calculee mathematiquement. Elle est definie par un 
ensemble de points de controle. Par exemple, la courbe cubique de Bezier est 
definie par les extremites et deux points de passage. 

Data binding : Le data binding, liaison aux donnees en francais, est le terme 
technique generalement utilise lorsqu'un mecanisme est mis en place pour 
realiser une liaison automatique entre la source de donnees (qu'elle soit un 
fichier ou un objet metier) et le controle correspondant dans 1' interface 
utilisateur. Ce mecanisme est normalement pris en charge par le langage utilise, 
en 1' occurrence ici le Framework .NET. 

Evenement : En programmation, un evenement est un signal envoye et qui peut 
etre intercepte et traite par du code qui se met a l'ecoute de cet evenement. Le 
code ainsi associe sera execute quand ce signal est emis. II est generalement 
associe a une action comme un clic de souris. Outre ceux deja existants, vous 
pouvez creer vos propres evenements. 

Fixed Document : Format de document qui represente celui-ci exactement 
comme l'auteur l'a decide. 

Flow Document : Format de document qui represente celui-ci de facon a 
optimiser la lisibilite. L'affichage s'ajuste a l'environnement. 

Framework : Ensemble de librairies de classes, de types de donnees et de tout 
autre element propre a un environnement de developpement. 

Glyph : Serie de segments utilises pour representer un mouvement. 

Heritage : Mecanisme qui permet a une classe de disposer des proprietes et des 
methodes de la classe dont elle herite. Elle ne devra alors definir ou redefinir 
les proprietes et methodes qui lui sont propres. 

IL : Voir MSIL. 

Ink : Type de donnees representant un trait. 

Instance : Une instance est un objet d'une classe determinee. Instance ou objet 
peuvent etre considered comme synonymes. 

Instanciation : Action de creer une nouvelle instance d'une classe. 

IntelliSense : Systeme permettant d'afficher dans un editeur les elements du 
langage correspondant a ce que vous avez deja tape, soit directement soit au 
travers d'une liste. Le but de 1'IntelliSense est de faciliter le travail du 
developpeur. 

Interpolation lineaire : Dans le cadre de ce livre, il s'agit d'une methode de 
transition entre deux etats realisee par un taux de changement constant pour 
chaque periode de temps. La transition emprunte le chemin le plus court. 
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Interpolation spllned : II s'agit d'une methode de transition entre deux etats 
realisee en suivant une courbe de Bezier. 

Methode : Une methode est une fonction ou une procedure associee a une 
classe. Elle aura acces aux proprietes et membres de la classe sans devoir les 
recevoir en parametre. 

MSIL : Abreviation de Microsoft Intermediate Language. Code genere par le 
compilateur .NET. Quel que soit le langage que vous utilisez (VB.NET, C#...), 
le resultat sera du MSIL. Le MSIL sera a son tour compile par le JIT (just in 
time compiler) pour etre transforme en code natif et execute. 

Noeud : Un noeud en XML est un ensemble compris entre une balise ouvrante 
et la balise fermante correspondante. 

Objet : Un objet est la materialisation d'une classe. Si voiture est une classe, 
votre voiture est un objet de la classe voiture. 

Propriete : Une propriete est une variable specifiquement associee a un objet. 

Propriete attachee : Une propriete attachee est une propriete qui peut etre 
attachee a n'importe quel objet dependant de l'instance de la classe ou elle est 
definie. Pour permettre cela, la classe doit contenir un accesseur statique (Get 
et Set) pour cette propriete attachee. Attention, il ne faut pas en deduire que la 
valeur est unique pour la classe ! Chaque objet qui utilise cette propriete 
conserve sa valeur particuliere. 

Resource : Ensemble d' informations non executable mais necessaire a 1' exe- 
cution du programme. 

Template : Mot anglais utilise dans le vocabulaire technique et dont la 
traduction habituelle est modele. Le template peut representer un modele au 
sens le plus strict du mot, par exemple en ce qui concerne les .dot dans 
MS-Word. Dans l'environnement XAML comme dans d'autres, il decrit 
l'interface utilisateur pour l'objet auquel il est associe, ce qui permet de separer 
contenu et presentation. II ne faut pas confondre template et style. Le style 
permet de preciser des specifications de l'interface comme la couleur ou la 
taille alors que le template permet de definir l'interface elle-meme. 

Transformation affine : Transformation lineaire suivie d'une translation. 

Transformation lineaire : Transformation par rotation, changement d'echelle ou 
oblique. 

Trigger : Mot technique anglais signifiant declencheur. Initialement issu du 
monde des bases de donnees, il est egalement utilise dans XAML. Un trigger est 
une petite procedure qui sera declenchee automatiquement lorsque certaines 
conditions definies en meme temps que le trigger sont rencontrees. Les mecanis- 
mes sont differents, mais le concept est assez semblable aux evenements. 
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URI : Uniform Resource Identifier. II s'agit de 1' implementation de la RFC2396 
de V Internet Engineering Task Force. 

WINFX : WinFX est un nouvel ensemble d'API destine a remplacer les 
anciennes API Windows. Originalement cree pour Windows Vista, il sera 
egalement porte sur Windows XP. 

WPF : Abreviation de Windows Presentation Foundation, precedemment connu 
sous le nom d'Avalon ; il s'agit d'un moteur d'affichage graphique pour 
Windows qui integre entre autres nativement la 3D. WPF fait partie de WinFX. 
II comprend egalement un langage declaratif, XAML. 

XML : Abreviation des termes anglais extended Markup Langage ou Extensible 
Markup Language selon les sources. II s'agit d'un langage de description de 
donnees souvent utilise pour la transmission d' information ou le stockage de 
faible volume. Comme le HTML, cette norme est heritee de SGML. 

13.3 Schema d'heritage des differentes 
classes Visual 

Les schemas d'heritage ci-dessous ne sont pas les schemas complets. lis 
reprennent principalement les classes qui ont ete abordees dans l'ouvrage. 



Schema d'heritage des differentes classes 
Visual 



Schema d'heritage des differentes classes Visual 


Classes d'heritage 


Visual 


U I Element 


FrameworkElement 




Control 




(voir tableau 
suivant) 


Decorator 




Border 


ViewBox 


Panel 
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Schema d'heritage des differentes classes Visual 



Classes d'heritage 






Canvas 






DockPanel 






Grid 






StackPanel 






WrapPanel 




Image 




MediaElement 




Page 






PageFunctionBase 




TextBlock 




ViewPort3D 




Shape 






El 1 ipse 






Line 






Path 






Polyl ine 






Polygon 






Rectangle 




Popup 




FixedPage 




PageContent 




Tool BarTray 



Le detail de I'heritage dans la branche Control. 



Le detail de I'heritage dans la branche Control 



Visual 

U I Element 

FrameworkElement 
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Le detail de I'heritage dans la branche Control 



Control 

ContentControl 

ButtonBase 

Button 

ToggleButton 
CheckBox 
RadioButton 
RepeatButton 
HeaderedContentControl 

Expander 
GoupBox 
Tool Bar 

Frame 
~Label 
Scroll Viewer 
Tool Tip 
Wi ndow 

NavigationWindow 

Fl owDocumentScrol 1 Vi ewer 



ItemsControl 





Selector 






ComboBox 






ListBox 






ListView 






TabControl 




TreeView 



DocumentVi ewerBase 



DocumentVi ewer 

Fl owdocument PageVi ewer 

Thumb 

GridSplitter 

ItemsControl 

MenuBase 

TabControl 

TextBoxBase 

RichTextBox 
TextBox 

RangeBase 

Slider 

PasswordBox 
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Schema d'heritage des differentes classes 
ContentElement 



Schema d'heritage des differentes classes ContentElement 



ContentElement 
FrameworkContentEl ement 

FixedDocument 

FlowDocument 

TextEl ement 

Block 

List 

Paragraph 

Section 

Table 

Inline 

AnchoredBlock 

Figure 
Fl oater 

LineBreak 

Run 

Span 

Hyperl ink 

Listltem 
TableCell 
TableRow 
TablerowGroup 

TableColumn 



Schema d'heritage des differentes classes 
Freezable 



Schema d'heritage des differentes classes Freezable 



Freezable 
Animatable 
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Schema d'heritage des differentes classes Freezable 



Brush 

SolidColorBrush 

Gradi antBrush 

Li nearGradi entBrush 

| Radial Gradi entBrush 

TileBrush 

| ImageBrush 

PathFigure 

PathSegment 

ArcSegment 

BezierSegment 

Li neSegment 

Pol.yBezierSegment 

PolyLi neSegment 

Quadrati cBezi erSegment 

| PolyQuadraticBezierSegment 

Pen 

Timel ine 



AnimationTimeline 





ColorAnimationBase 






ColorAnimation 






Col orAni mat ionUsingKey Frame 




DoubleAnimationBase 






DoubleAnimation 






DoubleAnimationUsingKeyFrame 



Timel ineGroup 

ParallelTimeline 



| | | Storyboard 

Material 

| DiffuseMaterial 

Model 3D 

Light 

| | Directional Light 

Geometry3D 

| MeshGeometry3D 

Gradi entStop 

Camera 

ProjectionCamera 

| | PerstpectiveCamera 

General Transform 

Transform 

RotateTransform 

ScaleTransform 

SkewTransform 

MatrixTransform 

| | TranslateTransform 

DubleKeyFrame 

Spl i neDoubl eKeyFrame 
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13.4 Resume des classes 
et des attributs utilises 

Classe ArcSegment 



Classe ArcSegment 


Attribut 


Utilite 


Size 


Definit les radiant X et Y determinant les 
caracteristiques de la courbure 


Point 


Point d'arrivee 


SweepDi recti on 


Definit le sens de la courbure depuis le point de 
depart. Les valeurs possibles sont : Clockwise et 
Counterclockwise. 


IsLargeArc 


Indique si l'arc depasse 180°. 


Classe BezierSegment 


Classe BezierSegment 


Attribut 


Utilite 


Point 1 


Definit le premier point de controle du segment 


Point2 


Definit le second point de controle du segment 


Point3 


Definit le troisieme point de controle du segment 


Classe Border 


Classe Border 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 


BorderThickness 


Epaisseur du bord 


ContextMenu 


Menu contextuel associe a ce cadre 


CornerRadius 


Facteur d'arrondissement des coins 


Height 


Hauteur 


Hon zontal Al i gnment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 
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Classe Border 


Attribut 


Utilite 


IsEnabl ed 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou Fal se. 
Peut egalement s'appliquer aux elements 

L 1 b LDUA1 I frill. 


rial y 1 II 


IVldlgCS aUlUUl QU CatliC 


rldAnc 1 yil L 


inaUlCUl lllaAllllUlll 


HdAW 1 U Lll 


l^aigCUl lllaAllllUlll 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


RenderTransform 


Transformation a appliquer 


Style 


Style a appliquer 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Width 


Largeur 


Classe Button 


Classe Button 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 


BorderThickness 


Epaisseur du bord 


Content 


Texte affiche 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Height 


Hauteur 
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Classe Button 


Attribut 


Utilite 


Hon' zontal Al i gnment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


Hon' zontal ContentAl i gnment 


Alignement horizontal du texte dans le controle. 
Les valeurs possibles sont Left, Rigth, Center, 
Stretch. 


IsCancel 


Indique s'il s'agit du bouton associe a la touche 
[Echap] 


IsDefault 


Indique s'il s'agit ou non du bouton par defaut. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou Fal se. 


rldXrlc 1 y N L 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de l'instance 


Render-Transform 


Transformation a appliquer 


Tablndex 


Position dans l'ordre de deplacement avec la touche 
de tabulation 


Tool Tip 


Info-bulle associee au bouton 


Vertical Al i gnment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Verti cal ContentAl i gnment 


Alignement vertical du texte dans le controle. 
Les valeurs possibles sont Top, Bottom, Center, 
Stretch. 


Width 


Largeur 


Classe Canvas 


Classe Canvas 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


Height 


Hauteur 
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Classe Canvas 


Attribut 


Utilite 


Horizontal Al ignment 


Ahgnement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou Fal se. 

l^CS CU11L1U1CS CIllallLS SU11L CgdlCIIlCllL UCScR-LlVCo. 


Ma vPin' nht 

rlaAnc 1 yi 1 L 


nautcui maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


RenderTransform 


Transformation a appliquer 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Width 


Largeur 




Classe Canves: Attributs attaches 


Attribut attache 


Utilite 


Top 


Position par rapport au bord superieur 


Left 


Position par rapport au bord gauche 


Bottom 


Position par rapport au bord inferieur 


Right 


Position par rapport au bord droit 



Pour plus d' informations sur les attributs attaches reportez-vous page 57. 

Classe CheckBox 



Classe CheckBox 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le 
contenu du fond 


BorderBrush 


Couleur du bord. 


BorderThickness 


Epaisseur du bord 


Content 


Texte affiche 
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Classe CheckBox 




1 If-ilif-a 


r /"\ n ^" rami 1 \/ 

run L r all 1 1 1 y 


Police d affichage 


run lo i zc 


Taille de la police d affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Height 


Hauteur 


Hori zontal Al i gnment 


Alignement horizontal du controle. 
Les valeurs possibles sont Left, Rigth, 
Center, Stretch. 


Hori zontal ContentAl i gnment 


Al" i-l ' ,11 , , 1 1 

Alignement horizontal du texte dans le 
controle. 

Les valeurs possibles sont Left, Rigth, 
Center, Stretch. 


IsChecked 


Determine si la case est cochee ou non. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou False. 


IsThreeState 


Determine s'il s'agit d'une case a cocher a 
2 ou 3 etats 


rldXrlc 1 y N L 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de l'instance 


RenderTransform 


Transformation a appliquer 


Vertical Al i gnment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, 

Center, Stretch. 


Verti cal ContentAl i gnment 


Alignement vertical du texte dans le 
controle. 

Les valeurs possibles sont Top, Bottom, 
Center, Stretch. 


Width 


Largeur 



372 • Le guide du codeur 



Resume des classes et des attributs utilises 



Classe ColorAnimation 



Classe ColorAnimation 


Attribut 


Utilite 


AutoReverse 


Permet de realiser automatiquement 1' animation en 
sens inverse a la fin. 


Duration 


Duree de l'animation 


From 


Couleur initiate 


RepeatBehavior 


Permet la repetition automatique de l'animation. 
11 existe trois types de repetition : IterationCount, 
RepeatDuration et Forever. 


To 


Couleur finale 


Classe ComboBox 


Classe ComboBox 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 


BorderThickness 


Epaisseur du bord 


ComboBoxItem 


Valeurs contenues dans la ListBox. Chaque valeur est 
contenue dans un nceud enfant Li stBoxItem. 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Height 


Hauteur 


Horizontal Al ignment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


Hori zontal ContentAl i gnment 


Alignement horizontal du texte dans le controle. 
Les valeurs possibles sont Left, Rigth, Center, 
Stretch. 


IsEditable 


Determine si le texte est editable ou si la valeur doit 
etre imperativement choisie dans la liste. 



Le guide du codeur • 373 




Annexes 



Classe ComboBox 


Attribut 


Utilite 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou False. Peut 
egalement s'appliquer aux elements ComboBoxItem. 


IsReadOnly 


Met la zone d'encodage en lecture seule. 


IsSelected 


S'applique a ComboBoxItem. Determine si la valeur est 
selectionnee ou non. 


IsTextSearchEnabled 


Permet de desactiver ou de reactiver la possibility de 

ICCilClCllCI Udlla la llalC. 


rldAnc 1 y[l L 


jndULCUl lllaAllllUlll 


rldAW 1 U LM 


l^algCUI llldAlIIlUlll 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de l'instance 


Render-Transform 


Transformation a appliquer 


Selectedlndex 


Determine l'index de l'element selectionne. 


Vertical Al ignment 


Alignement vertical du controle. Les valeurs possibles 
sont Top, Bottom, Center, Stretch. 


Verti cal ContentAl i gnment 


Alignement vertical du texte dans le controle. Les 
valeurs possibles sont Top, Bottom, Center, Stretch. 


Width 


Largeur 


Classe DiffuseMaterial 


Classe DiffuseMaterial 


Attribut 


Utilite 


AmbientColor 


Definit la couleur d'ambiance de la texture 


Color 


Definit la couleur de la texture 


UpDi recti on 


Definit le contenu de la texture 


Classe DirectionalLight 


Classe DirecionalLight 


Attribut 


Utilite 


Color 


Couleur de la lumiere 


Direction 


Orientation du spot 
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Classe DockPanel 



Classe DockPanel 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


Height 


Hauteur 


Horizontal Al ignment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou Fal se. 
Les controles enfants sont egalement desactives. 


MaxHeight 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


RenderTransform 


Transformation a appliquer 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Width 


Largeur 




Classe DockPanel: Attributs attaches 


Attribut attache 


Utilite 


Dock 


Indique ou doit avoir lieu le docking. 

Les valeurs possibles sont Top, Bottom, Left et Right. 


Classe DocumentViewer 


Classe DocumentViewer 


Attribut 


Utilite 


ShowPageBorders 


Determine si les bords autour du document doivent 
etre affiches 


Verti cal PageSpaci ng 


Definit l'espace entre deux pages 


Zoom 


Definit le zoom 
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Classe DoubleAnimation 



Classe DoubleAnimation 


Attribut 


Utilite 


AutoReverse 


Permet de realiser automatiquement 1' animation en 
sens inverse a la fin. 


Duration 


Duree de l'animation 


From 


Valeur initiale 


RepeatBehavior 


Permet la repetition automatique de l'animation. 11 
existe trois types de repetition : IterationCount, 
RepeatDuration et Forever. 


To 


Valeur finale 


Classe DoubleAnimationUsingKeyFrames 


Classe DoubleAnimationUsingKeyFrames 


Attribut 


Utilite 


AutoReverse 


Permet de realiser automatiquement l'animation en 
sens inverse a la fin. 


BeginTime 


Pour postposer le debut de l'animation 


Duration 


Duree de l'animation 


RepeatBehavior 


Permet la repetition automatique de l'animation. 11 
existe trois types de repetition : IterationCount, 
RepeatDuration et Forever. 


Classe Ellipse 


Classe Ellipse 


Attribut 


Utilite 


Height 


Hauteur de 1' ellipse 


Width 


Largeur de l'ellipse 


Fill 


Definit le fond de l'ellipse 


StrokeThickness 


Largeur du trait 


Stroke 


Definit le contenu du trait. Generalement la couleur. 



L'ellipse est positionnee en utilisant les attributs attaches du conteneur. 
Exemple: Canvas. Top. 
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Classe EventTrigger 



Classe EventTrigger 


Attribut 


Utilite 


RoutedEvent 


Evenement qui declenche le trigger 


Classe Expander 


Classe Expander 


Attribut 


Utilite 


ExpandDi recti on 


Determine le sens de 1' expansion 


Header 


Titre 


IsEnabled 


Si cet attribut est false, l'Expander et son contenu 
(sauf mention contraire) est desactive 


IsExpanded 


Determine si le contenu est affiche ou cache 


Name 


Nom de 1' instance 


Classe Figure 


Classe Figure 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 


BorderThickness 


Epaisseur du bord 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Height 


Hauteur de la figure 


Horizontal Anchor 


Determine la position horizontale de l'ancre. 
Les valeurs possibles sont ContentRight, ContentLeft, 
ContentCenter, PageRight, PageLeft, PageCenter, 
ParagraphRight et ParagraphLeft 
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Classe Figure 


Attribut 


Utilite 


Horizontal Offset 


Deplacement horizontal de la figure par rapport a son 
ancre. La valeur peut etre positive ou negative 


Margin 


Fixe les marges autour de la zone. 


Name 


Nom de l'instance 


TextAl ignment 


Alignement du texte. 

Les valeurs possibles sont Left, Rigth, Height, 
Justify 


Verti cal Anchor 


Determine la position verticale de 1' ancre. 

Les valeurs possibles sont ContentTop, ContentBottom, 

ContentCenter, PageTop, PageBottom, PageCenter et 

ParagraphTop 


Vertical Offset 


Deplacement vertical de la figure par rapport a son 
ancre. La valeur peut etre positive ou negative 


Width 


Largeur de la figure 


Classe FixedPage 


Classe FixedPage 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Height 


Hauteur 


Hori zontal Al i gnment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


Hori zontal Al i gnment 


Alignement horizontal de la page dans son contenant 


Margin 


Fixe les marges autour du texte. 


MaxHeight 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 
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Classe FixedPage 


Attribut 


Utilite 


MinWidth 


Largeur minimum 


Name 


Nom de l'instance 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Vertical Al ignment 


Alignement vertical de la page dans son contenant 


Width 


Largeur 


Class Fixed Document 


Classe FixedDocument 


Attribut 


Utilite 


Pages 


Collection d'objets PageContent qui definit chaque page 


Classe Floater 


Classe Floater 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 


BorderThickness 


Epaisseur du bord 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Horizontal Al ignment 


Alignement de la zone dans la ligne. 

Les valeurs possibles sont Left, Right et Center 


Margin 


Fixe les marges autour de la zone. 


Name 


Nom de l'instance 


TextAl ignment 


Alignement du texte. Les valeurs possibles sont Left, 
Rigth, Height, Justify 


Width 


Largeur de la zone 
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Classe FlowDocument 



Classe FlowDocument 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


MaxPageHeight 


Hauteur maximum d'une page 


MaxPageWidth 


Largeur maximum d'une page 


Mi nPageHen ght 


Hauteur minimum d'une page 


MinPageWidth 


Largeur minimum d'une page 


Name 


Nom de l'instance 


PageHeight 


Hauteur d'une page 


PageWidth 


Largeur d'une page 


TextAl ignment 


Alignement du texte. 

Les valeurs possibles sont Left, Rigth, Height, 
Justify 


Classe GradientStop 


Classe GradientStop 


Attribut 


Utilite 


Color 


Couleur a utiliser pour le degrade 


Offset 


Position relative ou prend effet la nouvelle couleur. 
Valeur entre 0 et 1 


Classe Grid 


Classe Grid 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


ColumnDefinitions 


Definition des colonnes. Contient des elements 
ColumnDefinition. 
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Classe Grid 


Attribut 


Utilite 


Height 


Hauteur 


Horizontal Al ignment 


Ahgnement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou Fal se. Les 

CU111IU1CS CIlldllLS SOUL CgalClllCllL UCSaCllVCa. 


Ma vPin' nlrf" 
rldAnc 1 y II L 


jnaULCUl UlaAlUlUlll 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


RenderTransform 


Transformation a appliquer 


RowDefim'tions 


Definition des lignes. Contient des elements 
RowDefinition. 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Width 


Largeur 




Classe Grid: Attributs attaches 


Attribut attache 


Utilite 


Row 


Numero de la ligne 


Column 


Numero de la colonne 


RowSpan 


Nombre de lignes regroupees 


ColumnSpan 


Nombre de colonnes regroupees 


Classe GridSplitter 


Classe GridSplitter 


Attribut 


Utilite 


Gri d . Col umn 


Colonne ou est place le GridSpl itter. 


Grid. ColumnSpan 


Nombre de colonnes sur lesquelles s'etant le 
GridSplitter. 


Grid. Row 


Ligne ou est place le GridSplitter. 
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Classe GridSplitter 


Attribut 


Utilite 


Grid.RowSpan 


Nombre de lignes sur lesquelles s'etant le 
GridSplitter. 


Hon' zontal Al i gnment 


Alignement horizontal utilise surtout avec 
Res i zeDi recti on= " Rows " 


ResizeDirection 


Definit le sens. Vertical si la valeur est Columns et 
horizontal pour 1 valeur Rows 


ShowPreview 


Determine si le bord est directement deplace ou si 
une previsualisation est d'abord effectuee 


Classe GridView 


Classe GridView 


Attribut 


Utilite 


Al 1 owsCol umnReorder 


Les valeurs possibles sont True et Fal se. Autorise ou 
non l'utilisateur a deplacer les colonnes 


Columns 


Collection d'objet GridViewColumn definissant les 
colonnes du GridView 


Classe GridViewColumn 


Classe GridViewColumn 


Attribut 


Utilite 


Di spl ayMemberBi ndi ng 


Definit la propriete de l'objet associe qui doit etre 
affiche dans cette colonne. 


Header 


Titre de la colonne 


Width 


Largeur de la colonne 


Classe Hyperlink 


Classe Hyperlink 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 
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Classe Hyperlink 


Al-1-nihi it* 
MLLI IIJUL 


1 ll-ilit-ci 
Ublllbc 


Fnnt^t'vl p 

r U 1 I L. -J Ly 1 C 


Sfvlp Hp la nnlicp Ttalir Nnrmal fihlinup 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Name 


Nom de 1' instance 


NavigateUri 


Adresse de destination 


Text 


Texte affiche 


Classe Image 


Classe Image 


Attribut 


Utilite 


Height 


Hauteur 


Horizontal Al ignment 


Alignement horizontal du controle. Les valeurs 
possibles sont Left, Rigth, Center, Stretch. 


IsEnabled 


Determine si le controle est actif ou non. Les valeurs 
possibles sont True ou Fal se. 


MaxHeight 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


RenderTransform 


Transformation a appliquer 


Source 


Source de l'image 


Vertical Al ignment 


Alignement vertical du controle. Les valeurs possibles 
sont Top, Bottom, Center, Stretch. 


Width 


Largeur 


Classe ImageBrush 


Classe ImageBrush 


Attribut 


Utilite 


Al ignmentX 


Alignement horizontal. Les valeurs possibles sont : 
Left, Center et Right 


Al ignmentY 


Alignement vertical. Les valeurs possibles sont : Top, 
Center et Bottom. 
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Classe imageBrush 


Attribut 


Utilite 


ImageSource 


Chemin et nom du fichier contenant l'image. 


Stretch 


Les valeurs possibles sont : None, Stretch, Uniform, 
UniformToFill 


TileMode 


Les valeurs possibles sont None, Tile, FlipX, FlipY et 
FlipXY 


Viewport 


Permet de controler la dimension relative de 1' image 
en vue de realiser une mosaique 


Classe Label 


Classe Label 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 


BorderThickness 


Epaisseur du bord 


Content 


Texte affiche 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Height 


Hauteur 


Hori zontal Al i gnment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


Hori zontal ContentAl i gnment 


Alignement horizontal du texte dans le controle. 
Les valeurs possibles sont Left, Rigth, Center, 
Stretch. 


MaxHeight 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de l'instance 
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Classe Label 


Attribut 


Utilite 


Render-Transform 


Transformation a appliquer 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Verti cal ContentAl i gnment 


Alignement vertical du texte dans le controle. 

Les valeurs possibles sont Top, Bottom, Center, Stretch. 


Width 


Largeur 


Classe Line 


Classe Line 


Attribut 


Utilite 


XI 


Coordonnee horizontale du point de depart 


Yl 


Coordonnee verticale du point de depart 


X2 


Coordonnee horizontale du point d'arrivee 


Y2 


Coordonnee verticale du point d'arrivee 


StrokeThickness 


Largeur du trait 


Stroke 


Definit le contenu du trait. Generalement la couleur. 


Classe LinearGradientBrush 


Classe LinearGradientBrush 


Attribut 


Utilite 


EndPoint 


Point ou s'arrete le degrade 


GradientStop 


Collection des points de controle pour le degrade. A 
chaque point de controle, vous pourrez changer les 
parametres tels que la couleur 


StartPoint 


Point de depart pour le degrade 



Classe LineSegment 



Classe LineSegment 


Attribut 


Utilite 


Point 


Point d'arrivee 
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Classe ListBox 



Classe ListBox 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 


BorderThickness 


Epaisseur du bord 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Height 


Hauteur 


Hori zontal Al i gnment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

O L i C LLN. 


Hori zontal ContentAl i gnment 


Alignement horizontal du texte dans le controle. 

iXti VdlCUIa pUSMUlCS SOI1L Lcl L, KlyLM, CciILci, 

Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou False. Peut 
egalement s'appliquer aux elements ListBoxItem. 


IsSelected 


S'applique a ListBoxItem. Determine si la valeur est 
selectionnee ou non. 


Li stBoxItem 


Valeurs contenues dans la ListBox. Chaque valeur est 
contenue dans un nceud enfant ListBoxItem. 


MaxHei ght 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de l'instance 


RenderTransform 


Transformation a appliquer 


SelectionMode 


Determine le mode de selection. 

Les valeurs possibles sont Single, Multiple, Extend 


Vertical Al i gnment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 



386 • Le guide du codeur 



Resume des classes et des attributs utilises 



Classe ListBox 


Attribut 


Utilite 


Verti cal ContentAl i gnment 


Alignement vertical du texte dans le controle. 
Les valeurs possibles sont Top, Bottom, Center, 
Stretch. 


Width 


Largeur 



Classe ListView 



Classe ListView 


Attribut 


Utilite 


Height 


Hauteur de la ListView 


ItemSource 


Source des donnees indues dans la ListView 


ItemTemplate 


Definit la presentation des donnees en utilisant un 
DataTemplate 


Margin 


Marge autour de la ListView 


Name 


Nom de 1' instance 


Vertical Al i gnment 


Alignement du contenu 



Classe Menu 



Classe Menu 


Attribut 


Utilite 


Height 


Hauteur de la barre de menu 


Items 


Collection d'objet Menu I tern qui determine les 
elements du menu 


Name 


Nom de l'instance 


Vertical Al i gnment 


Alignement de la barre de menu dans son conteneur 



Classe Menultem 



Classe Menultem 


Attribut 


Utilite 


Header 


Texte affiche 


IsChecked 


Definit si ce point du menu est coche ou non 
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Classe Menultem 


Attribut 


Utilite 


IsEnable 


Definit si ce point du menu est actif ou non 


Name 


Nom de l'instance 



Classe MeshGeometry3D 



Classe MeshGeometry3D 


Attribut 


Utilite 


Positions 


Collection de vertex position pour tracer la forme 



Classe IMavigationWindow 



Classe IMavigationWindow 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


CanGoBack 


Le retour arriere est possible 


CanGoForward 


Le renvoi vers l'avant est possible 


DataContext 


Contexte pour la liaison aux donnees 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Height 


Hauteur 


Hon zontal Al i gnment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou False. 
Les controles enfants sont egalement desactives. 


Margin 


Marges autour du controle 


MaxHeight 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 
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Classe NavigationWindow 


MLL[ IUUL 


1 If-ilit'o 


Mi nUli Hth 


Largeur minimum 


Name 


Nom de 1 instance 


INd V 1 yd L 1 UilocI V 1 Lc 


Offre des services pour naviguer entre les pages 


RenderTransform 


Transformation a appliquer 


Ressources 


Collection des ressources utilisables dans la page 


Source 


Adresse URI de la page a afficher dans la fenetre 


Title 


Titre de la page 


Triggers 


Collection de trigger associes a la fenetre 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Width 


Largeur 


Wi ndowStartupLocati on 


Position de la fenetre 


Classe ObjectData Provider 


Classe ObjectDataProvider 


Attribut 


Utilrte 


ConstructorParameters 


Parametres a transmettre au constructeur 


MethodName 


Nom doit etre appelee de la methode qu 


MethodParameters 


Liste des parametres qui doivent etre transmis a la 
methode 


ObjectType 


Type de l'objet qui doit etre cree 


Objectlnstance 


Instance utilisee comme source 


Classe Page 


Classe Page 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


DataContext 


Contexte pour la liaison aux donnees 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 
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Classe Page 


Attribut 


Utilite 


Height 


Hauteur 


Hori zontal Al i gnment 


Ahgnement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou False. Les 

CUilliUlCS CllldllLS SUlll CgalClllCill UCSaCllVCS. 


rid r y 1 II 


IvldigcS dULUUl UU CU11L1U1C 


rldAne 1 y II L 


1— iQiitf^iir timviiYiiim 
jndULCUl llldXllllUlll 


MavWn Ht h 
rid An 1 U Lll 


1 nw*iiir nrnvimiiin 
l^digCUl llldAliilUlll 


ri i line i y ii l 


1— iQiitf^iii" imniiniiin 


Mi nWi Ht h 


i^digcui minimum 


NdlTlG 


1>IU111 UC 1 lllSLdllCC 


NavigationService 


Offre des services pour naviguer entre les pages 


RenderTransform 


Transformation a appliquer 


Ressources 


Collection des ressources utilisables dans la page 


Title 


Titre de la page 


Triggers 


Collection de trigger associes a la page 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Width 


Largeur 


WindowHeight 


Hauteur de la fenetre 


WindowTitle 


Titre de la fenetre 


WindowWidth 


Largeur de la fenetre 


Classe PageContent 


Classe PageContent 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


DataContext 


Contexte pour la liaison aux donnees 


Height 


Hauteur 
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Classe PageContent 


Attribut 


Utilite 


Horizontal Al ignment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou Fal se. Les 

CUllliUlCS CllldllLS SOUL C^alClllCllL UCSaCllVCS. 


rial y 1 11 


IvldlgCS aUlUUl UU CU11L1U1C 


Ma vPin' nht 

rldAnc 1 yi 1 1 


naUlCUl lllaAllllUlll 


Ma. yUK Hth 


l^ai^CUl lllaAllllUlll 


Mi nl-lon nht 
H I Fine 1 y II L 


naUlCUl 1111111111U111 


Mi nUH Hth 
M 1 tin 1 U Lll 


l^dl^CUl 1111111111U111 


Name 


1NU111 UC 1 lllslailCC 


RenderTransform 


Transformation a appliquer 


Ressources 


Collection des ressources utilisables dans la page 


Source 


Fichier xaml a charger dans le contenu de la page 


Title 


Titre de la page 


Triggers 


Collection de trigger associes au controle 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Width 


Largeur 


Classe Paragraph 


Classe Paragraph 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BreakPageBefore 


Demande un saut de page avant le paragraphe 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


KeepTogether 


Garder le paragraphe sur une meme page 
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Classe Paragraph 


Attribut 


Utilite 


KeepWithNext 


Garder le paragraphe sur la meme page que le suivant 


Margin 


Marges autour du paragraphe 


Name 


Nom du paragraphe 


Text 


Texte contenu dans le paragraphe 


TextAl ignment 


Alignement du texte. Les valeurs possibles sont Left, 
Rigth, Height, Justify 


Textlndent 


Indentation de la premiere ligne 


Classe Path 


Classe Path 


Attribut 


Utilite 


StrokeThickness 


Largeur du trait 


Stroke 


Definit le contenu du trait. Generalement la couleur. 


Fill 


Definit le remplissage 


Data 


Contient un objet de type Geometry qui represente une 
forme complexe realisee avec differentes figures. 



Classe PathFigure 



Classe PathFigure 


Attribut 


Utilite 


StartPoint 


Point de depart de la figure 


Segments 


Collection de segments successifs pour utilises pour former la 
figure. 

Les segments peuvent etre de type ArcSegment, BezierSegment, 
LineSegment, PolyBezierSegment, PolyLineSegment, 
Pol yQuadrati cBezi erSegment, Quadrati cBezi erSegment. 



Classe Pen 



Classe Pen 


Attribut 


Utilite 


Thickness 


Largeur du trait 


DashStyle 


Style du trait (continu, pointille, ...) 
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Classe Pen 


Attribut 


Utilite 


Brush 


Definit le contenu du trait 


Color 


Definit la couleur du trait 



Classe PerspectiveCamera 



Classe PerspectiveCamera 


Attribut 


Utilite 


LookDi recti on 


Participe a determiner Tangle de vue en indiquant a direction 


Position 


Definit la position de la camera dans l'espace 3D 


UpDi recti on 


Participe a determiner Tangle de vue en indiquant a direction 



Classe Polygon 



Classe Polygon 


Attribut 


Utilite 


Points 


Collection des points determinant les sommets 


StrokeThickness 


Largeur du trait 


Stroke 


Definit le contenu du trait. Generalement la couleur. 


Fill 


Definit le remplissage du polygone 



Classe Polyline 



Classe Polyline 


Attribut 


Utilite 


Points 


Collection des points de passage relie par des lignes 


StrokeThickness 


Largeur du trait 


Stroke 


Definit le contenu du trait. Generalement la couleur. 



Casse PolylineSegment 



Casse PolylineSegment 


Attribut 


Utilite 


Points 


Definit les points de passage 
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Classe Popup 



Classe Popup 


Attribut 


Utilite 


Name 


Nom de l'instance 


PlacementRectangle 


Taille du popup 


PI acementTarget 


Element auquel le popup est attache 


Classe RadialGradientBrush 


Classe RadialGradientBrush 


Attribut 


Utilite 


GradientStops 


Collection des points de controle pour le degrade. A 
chaque point de controle, vous pourrez changer les 
parametres tels que la couleur 


Classe RadioButton 


Classe RadioButton 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 


BorderThickness 


Epaisseur du bord 


Content 


Texte affiche 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


GroupName 


Nom du groupe dans lequel est inclus ce RadioButton 


Height 


Hauteur 


Horizontal Al ignment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 
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Classe RadioButton 


Attribut 


Utilite 


Hori zontal ContentAl i gnment 


Alignement horizontal du texte dans le controle. 
Les valeurs possibles sont Left, Rigth, Center, 
Stretch. 


IsChecked 


Determine si la case est cochee ou non. 


IsEnabled 


Determine si le controle est actif ou non. 

l^CS ValCUIS pUSMUlCS SUI1L 1 T Uc UU rd 1 ic. 


Ma vPin' nht 

rlaAnc 1 yi 1 I 


jnallLCUl lllaAlllllllll 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


RenderTransform 


Transformation a appliquer 


Verti cal Al i gnment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Verti cal ContentAl i gnment 


Alignement vertical du texte dans le controle. 
Les valeurs possibles sont Top, Bottom, Center, 
Stretch. 


Width 


Largeur 


Classe Rectangle 


Classe Rectangle 


Attribut 


Utilite 


Height 


Hauteur de l'ellipse 


Width 


Largeur de l'ellipse 


RadiusX 


Radiant en X utilise pour arrondir les coins 


RadiusY 


Radiant en X utilise pour arrondir les coins 


Fill 


Definit le fond de l'ellipse 


StrokeThickness 


Largeur du trait 


Stroke 


Definit le contenu du trait. Generalement la couleur. 



Le rectangle est positionne en utilisant les attributs attaches du conteneur. 
Exemple: Canvas. Top. 
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Classe RotateTransform 



Classe RotateTransform 


Attribut 


Utilite 


Angle 


Determine Tangle de rotation en degre 


CenterX 


Modifie la coordonnee X du point centrale de la rotation 


CenterY 


Modifie la coordonnee Y du point centrale de la rotation 



Classe RepeatButton 

0^^^ Voir aussi la classe Button page 368. 
Renvoi 



Classe RepeatButton 


Attribut 


Utilite 


Cursor 


Type de curseur pour la souris 


Delay 


Delai avant de commencer les repetitions 


Interval 


Intervalle entre deux appels a l'evenement Click. 


Classe ScaleTransform 


Classe ScaleTransform 


Attribut 


Utilite 


CenterX 


Deplace horizontalement l'objet 


CenterY 


Deplace verticalement l'objet 


ScaleX 


Determine le facteur de multiplication horizontal 


ScaleY 


Determine le facteur de multiplication vertical 



Classe ScrollViewer 



Classe ScrollViewer 


Attribut 


Utilite 


Name 


Nom de l'instance 


Horizontal Scroll Bar 
Visibility 


Determine comment la barre de defilement doit etre geree. 
Les valeurs possibles sont Disabled, Visible, Hidden et 
Auto. 
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Classe ScrollViewer 


Attribut 


Utilite 


Vertical Scroll Bar 
Visibility 


Determine comment la barre de defilement doit etre geree. 
Les valeurs possibles sont Disabled, Visible, Hidden et Auto. 



Classe Section 



Classe Section 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BreakPageBefore 


Demande un saut de page avant le paragraphe 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Margin 


Marges autour du paragraphe 


Name 


Nom de la section 


TextAl ignment 


Alignement du texte. 

Les valeurs possibles sont Left, Rigth, Height, 
Justify 



Classe Setter 



Classe Setter 


Attribut 


Utilite 


Property 


Propriete a atteindre 


Value 


Valeur a as signer a la propriete 



Classe SkewTransform 



Classe SkewTransform 


Attribut 


Utilite 


AngleX 


Angle de rotation sur l'axe horizontal 


AngleY 


Angle de rotation sur l'axe vertical 
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Classe Skew/Transform 


Attribut 


Utilite 


CenterX 


Determine la position centrale horizontale de la 
transformation 


CenterY 


Determine la position centrale verticale de la 
transformation 


Classe Slider 


Classe Slider 


Attribut 


Utilite 


AutoTool Ti pPl acement 


Position du tooltip automatique 


AutoTool Ti pPreci si on 


Nombre de decimales affichees dans le tooltip 
automatique 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 


RnrHprThi r Icnpc: d 

UUI UCI Mil LMIC55 


PnaiQCPiir Hn hnrH 

l^l^u 1>,>1_ 111 UU 1 1 V 1 J u 


Cursor 


Tvnp Hp pnrQpnr noiir la ^onrn; 


Del ay 


l~")plai avar( Hp pninmpiippr lps rpnptitinnt; 

L»G±£l± tlVillll UL *w V'l 1 11 1 H_ 111. A. 1 11/3 ltLlt/llllCllfl 


Fnrpnrni inrl 
i u I cy i uu 1 1 u 


("'niilpiir rfn tpvtp 


Hpi nht 


P-taiitpnr 


Hori zontal Al i gnment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, Stretch. 


Interval 


Intervalle entre deux incrementations. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou False. Peut 
egalement s'appliquer aux elements Li stBoxItem. 


IsSelectionRangeEnabled 


Permet l'affichage d'une zone 


IsSnapToTickEnabled 


Determine si la valeur selectionnee est 
automatiquement ajustee a un repere 


LargeChange 


Increment lors du changement de valeur via un click 
sur le controle 


MaxHeight 


Hauteur maximum 


Maximum 


Valeur maximale 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


Minimum 


Valeur minimale 
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Classe Slider 


Al-1-nihi it* 
MLLI IIJUL 


1 If-ilit'o 


Mi nidi H+h 
rl 1 tl W 1 U IN 


Largeur minimum 


Name 


Nom de 1 instance 


3 "f~ i f\ y\ 

V\ 1 crl Ld L 1 Url 


Determine 1 orientation horizontale ou verticale 


KtrNUci 1 [drib 1 Ui III 


Transformation a appliquer 


JC 1 CL L 1 UlltllU 


Indique la valeur maximale de la zone affichee 


SelectionStart 


Indique la valeur minimale de la zone affichee 


TickFrequency 


Espacement entre les reperes 


TickPlacement 


Position des reperes visuels 


Ticks 


Liste des valeurs pour les reperes visuels 


Value 


Valeur indiquee par le curseur 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, Stretch. 


Width 


Largeur 


Classe SolidColorBrush 


Classe SolidColorBrush 


Attribut 


Utilite 


Color 


Determine la Determine la couleur mais aussi le 
contenu du fond 


Transform 


Definit la transformation a appliquer 


Classe SplineDoubleKeyFrame 


Classe SplineDoubleKeyFrame 


Attribut 


Utilite 


KeyTime 


Temps ou elle doit etre atteinte 


Value 


Valeur a atteindre 


Classe StackPanel 


Classe StackPanel 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 
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Classe StackPanel 


Attribut 


Utilite 


Height 


Hauteur 


Hori zontal Al i gnment 


Ahgnement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou False. Les 

CUI1LIU1C3 ClllclllLs SU11L CgalClllCIlL tlCaaCllVCS. 


ridAnc iyii I 


jndULCUl UlaAllllUlll 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de l'instance 


Render-Transform 


Transformation a appliquer 


Vertical Al i gnment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Width 


Largeur 


Classe StoryBoard 


Classe StoryBoard 


Attribut attache 


Utilite 


TargetName 


Nom de l'objet qui est anime 


TargetProperty 


Nom de la propriete qui subit 1' animation 


Classe Style 


Classe Style 


Attribut 


Utilite 


X:Key 


Nom du style. Ce nom est utilise par les controles 
souhaitant appliquer le style. 11 s'agit de la methode 
de nommage utilisee pour les ressources. 


TargetType 


Type de controle. Le style est automatiquement 
applique a tous les controles de ce type. 
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Classe Table 



Classe Table 


Attribut 


Utilite 


BorderBrush 


Couleur du bord 


BorderThickness 


Largeur du bord 


Col umns 


Collection d'objets TableColumn qui definissent les 
colonnes 


RowGroups 


Contient un objet de type Tabl eRowGroup et qui 
contient les lignes de la table 



Classe TableCell 



Classe TableCell 


Attribut 


Utilite 


Block. TextAl ignment 


Alignement du texte dans la cellule 


Col umnSpan 


Nombre de colonnes sur lesquels s'etend cette cellule 



Classe TableColumn 



Classe TableColumn 


Attribut 


Utilite 


Background 


Definit le fond de la colonne 


Width 


Definit la largeur de la colonne 



Classe TableRow 



Classe TableRow 


Attribut 


Utilite 


Background 


Definit le fond de la ligne 



Classe TabControl 



Classe TabControl 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 
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Classe TabControl 


Attribut 


Utilite 


BorderThickness 


Epaisseur du bord 


Height 


Hauteur 


Horizontal Al ignment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


Hon' zontal ContentAl i gnment 


Alignement horizontal du texte dans le controle. 
Les valeurs possibles sont Left, Rigth, Center, 
Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou False. Les 
controles enfants sont egalement desactives. 


MdXnc 1 gn I 


Hauteur maximum 


Ma AW 1 U LT1 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de l'instance 


RenderTransform 


Transformation a appliquer 


Tab I tern 


Le TabControl contient un ensemble de Tabltem 


Tab I tern. Header 


Header ne fait pas partie de la classe TabControl mais 
bien de la classe Tabltem. 11 represente le texte affiche 
dans l'onglet. 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Verti cal ContentAl i gnment 


Alignement vertical du texte dans le controle. 
Les valeurs possibles sont Top, Bottom, Center, 
Stretch. 


Width 


Largeur 


Classe Tabltem 


Classe Tablem 


Attribut 


Utilite 


Header 


Texte contenu dans l'onglet 
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Classe TextBlock 



Classe TextBox 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Height 


Hauteur 


Horizontal Al ignment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


Margin 


Fixe les marges autour du texte. 


MaxHeight 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


RenderTransform 


Transformation a appliquer 


Text 


Texte affiche 


TextAl ignment 


Alignement du texte. 

Les valeurs possibles sont Left, Rigth, Height, 
Justify 


TextTri turning 


Gere le comportement en bout de controle. 
Les valeurs possibles sont None, WordEl 1 ipsi s, 
CharacterEllipsis 


TextWrapping 


Gere le comportement en bout de ligne. 
Les valeurs possibles sont NoWrap, Wrap et 
WrapWithOverflow. 


Vertical Al ignment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Width 


Largeur 
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Classe TextBox 



Classe TextBox 


Attribut 


Utilite 


AcceptsReturn 


Autorise le retour a la ligne impose dans le contenu. 
Doit etre True ou Fal se 


AcceptsTab 


Autorise l'utilisation des tabulations dans le contenu. 
Doit etre True ou False. 


Background 


Determine la couleur mais aussi le contenu du fond 


BorderBrush 


Couleur du bord. 


BorderThi ckness 


Epaisseur du bord 


CharacterCasi ng 


Case du contenu. Les valeurs possibles sont Upper, 
Lower 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Foreground 


Couleur du texte 


Ua-i n h + 


JTlaU-lC Lll 


Hori zontal Al i gnment 


Alignement horizontal du controle. 

l^CS VcllCUIS pUSMUlCS SUIll Lcl L, KiyLM. CciILci, 

Stretch. 


Hori zontal ContentAl i gnment 


Alignement horizontal du texte dans le controle. 
Les valeurs possibles sont Left, Rigth, Center, 
Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou False. 


IsReadOnly 


Determine si le controle est en lecture seule ou non. 
Les valeurs possibles sont True ou False. 


MaxHeight 


Hauteur maximum 


MaxLength 


Nombre maximum de caracteres 


MaxLines 


Nombre de lignes maximal affichees 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinLines 


Nombre de lignes minimal affichees 


MinWidth 


Largeur minimum 
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Classe TextBox 


Attribut 


Utilite 


Name 


Nom de l'instance 


Render-Transform 


Transformation a appliquer 


Text 


Texte affiche 


TextWrapping 


Determine le comportement dans le cas ou le contenu 

atteint l'extremite du controle. 

Les valeurs possibles sont NoWrap, Wrap, 

WrapWthOverflow 


Verti cal Al i gnment 


Alignement vertical du controle. 

Les valeurs possibles sont Top, Bottom, Center, 

Stretch. 


Verti cal ContentAl i gnment 


Alignement vertical du texte dans le controle. 
Les valeurs possibles sont Top, Bottom, Center, 
Stretch. 


Width 


Largeur 


Classe Toolbar 


Classe Toolbar 


Attribut 


Utilite 


Band 


Determine dans quelle bande de la Tool BarTray doit 
etre positionne la Tool Bar 


Bandlndex 


Determine l'ordre de la Tool Bar dans la bande 


Height 


Hauteur de la barre d'outils 


Width 


Largeur de la barre d'outils 


Classe ToolbarTray 


Classe ToolbarTray 


Attribut 


Utilite 


IsLocked 


Autorise ou non le deplacement des barres d'outils au 
sein de la Tool BarTray 


Orientation 


Determine 1' orientation. Les valeurs possibles sont 
Vertical et Horizontal 


Background 


Definit le fond 
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Classe TranslateTransform 



Classe TranslateTransform 


Attribut 


Utilite 


X 


Deplacement sur l'axe horizontal 


Y 


Deplacement sur l'axe vertical 


Classe TreeView 


Classe TreeView 


Attribut 


Utilite 


Background 


Defini le fond du controle. Typiquement la couleur. 


Height 


Hauteur 


Items 


Collection de TreeVi ewltems contenant la hierarchie 
des nceuds contenu dans le TreeView. 


Margin 


Defini les marges autour du controle 


MaxHeight 


Hauteur maximum du 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de l'instance 


Width 


Largeur 



Classe TreeViewltem 



Classe TreeViewltem 


Attribut 


Utilite 


Header 


Defini le titre du noeud 


ItemsSource 


Defini la source des donnees contenues dans le noeud. 


ItemTemplate 


Defini la forme des donnees affichees. 



Classe Trigger 



Classe Trigger 


Attribut 


Utilite 


Property 


Nom de la propriete qui va declencher le trigger 
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Classe Trigger 


Attribut 


Utilite 


Setters 


Collection d'objets Setter qui seront appliques 
lorsque le trigger est active. 


Value 


Valeur de la propriete definie avec l'attribut Property 
et qui declenche le trigger. 


Classe ViewBox 


Classe ViewBox 


Attribut 


Utilite 


Height 


Hauteur 


MaxHeight 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


Width 


Largeur 


Stretch 


Defini la maniere dont le contenu sera etendu. 
Les valeurs possibles sont : Fill, None, Uniform, 
UniformToFill 


StretchDi recti on 


Determine le sens de retirement. 

Les valeurs possibles sont : Both, DownOnly, UpOnly 


Classe Viewport3D 


Classe Viewport3D 


Attribut 


Utilite 


Camera 


Contient un objet de type Camera qui gere la 
projection du contenu en 3 dimensions 


Height 


Hauteur 


MaxHeight 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


Width 


Largeur 
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Classe Window 



Classe Window 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


DataContext 


Contexte pour la liaison aux donnees 


Font Family 


Police d'affichage 


FontSize 


Taille de la police d'affichage 


FontStretch 


Espacement des caracteres 


FontStyle 


Style de la police. Italic, Normal, Oblique 


FontWeight 


Epaisseur des traits 


Height 


Hauteur 


Hon' zontal Al i gnment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou False. Les 
controles enfants sont egalement desactives. 


Margin 


Marges autour du controle 


MaxHeight 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


RenderTransform 


Transformation a appliquer 


Ressources 


Collection des ressources utilisables dans la page 


Title 


Titre de la page 


Triggers 


Collection de triggers associes a la fenetre 


Vertical Al i gnment 


Alignement vertical du controle. Les valeurs possibles 
sont Top, Bottom, Center, Stretch. 


Width 


Largeur 


Wi ndowStartupLocati on 


Position de la fenetre 
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Classe WrapPanel 



Classe WrapPanel 


Attribut 


Utilite 


Background 


Determine la couleur mais aussi le contenu du fond 


Height 


Hauteur 


Horizontal Al ignment 


Alignement horizontal du controle. 

Les valeurs possibles sont Left, Rigth, Center, 

Stretch. 


IsEnabled 


Determine si le controle est actif ou non. 
Les valeurs possibles sont True ou Fal se. Les 
controles enfants sont egalement desactives. 


MaxHei ght 


Hauteur maximum 


MaxWidth 


Largeur maximum 


MinHeight 


Hauteur minimum 


MinWidth 


Largeur minimum 


Name 


Nom de 1' instance 


RenderTransform 


Transformation a appliquer 


Vertical Al ignment 


Alignement vertical du controle. Les valeurs possibles 
sont Top, Bottom, Center, Stretch. 


Width 


Largeur 


Classe XmlDataProvider 


Classe XmlDataProvider 


Attribut 


Utilite 


X:Key 


Nom de 1' instance 


Source 


Fichier XML contenant les donnees 



13.5 Classes autorisees dans la zone 
internet 

Pour le developpement d' application hebergee sur un site Internet, il est utile de 
connaitre les classes autorisees a etre executees sans extension des droits. 
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Layout 

■ Canvas 

■ DockPanel 

■ Grid 

■ StackPanel 

■ TextBlock 

■ Viewbox 

■ FlowDocument 

Controls 



■ Border 

■ Button 

■ ComboBox 

■ Frame 

■ Hyperlink 

■ Label 

■ Menu 

■ Page 

■ Popup. (Limite a la zone d'affichage du navigateur.) 

■ Scroll Bar 

■ Scroll Viewer 

■ TextBox 

■ Thumb 

■ Tool Tip 

Graphics and Animation 

■ Les classes de dessin 2D et 3D 

■ Les classes gerant les animations 

■ MediaElement (audio et video) 

■ Glyphs 

■ Path 

■ Image 
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Autres 

■ Les classes assurant le data binding 

■ Les classes assurant la navigation 

■ Les classes relatives aux styles 



13.6 Liste des touches de raccourcis 
pour les commandes d'edition 



Touches de raccourci pour 


les commandes d'edition 


Commande 


Raccourci 


Al i gnCenter 


ICtril+fEl 


Al i gnjusti fy 


f Ctrl 1+fjl 

l*-* 1 ' ' J 1 ILL) 


Al ignLeft 


fCtrfl+fLl 

I w J I J 


Al ignRight 


ICtrll+fRl 

L_r__!J ILL) 


Backspace 


(Retour arriere] 


CorrectSpel l i ngError 


n 

LJ 


DecreaseFontSize 


[Ctrl[+ 


Decreaselndentati on 


[ Ctrl i+fMaji+rn 


Delete 


[Delete] 


Del eteNextWord 


[CtrlJ+[SupprJ 


Del etePrevi ousWord 


[ Ctrl ]+( Retour arriere] 


EnterLineBreak 


[ Shift ]+| Entree] 


EnterParagraphBreak 


| Entree | 


IgnoreSpel l i ngError 


Q 


IncreaseFontSize 


[CtrlJ+OemCloseBrackets 


Increaselndentation 


(CtrD+S 


MoveDownByLine 


[Bas] 


MoveDownByPage 


|Page suivante] 


MoveDownByParagraph 


[CtrT]+[Bas] 


MoveLeftByCharacter 


| Gauche] 


MoveLeftByWord 


[Ctrl)+[GaucheJ 


MoveRi ghtByCharacter 


[ Droite) 


MoveRightByWord 


[CtrlJ+[DroiteJ 


MoveToDocumentEnd 
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Touches de raccourci pour 


les commandes d'edition 


LfUlTirTldnUc 


naccourci 


HUVc 1 UUULUIllcil Lo Ldi L 


1 r^tri l_i_f rioKi it 1 


IIUVC 1 UL 1 1 led IU 




1*10 Vc 1 UL 1 ilco Ldl L 


I ueouij 


HUVcUUDy L | Nc 


1 LJ^i 1+] 

[ nauij 


Mn\/ ol Infix/Dana 
HUVcUpDy rdyc 


(Page precedente] 


HUVcUpDy rdi dy 1 dpi 1 


1 r^trl l_l_f U-I11 it 1 


jc 1 cL LUUWilDy L 1 lie 


[Maj)+[ bas) 


jc 1 cL LUUWilDy rdyc 


( Maj )+( Page precedente ) 


jc 1 cL LUUWilDy rdi dy 1 dpn 


[ UTrl j+[ iviaj Ji~[ baS J 


oclcLLLcl LDyLildi dL Ltri 


I ft J1 <1 i f~* 1 1 1 1-> hi .-i 1 

|Maj)+|uaucnej 


OclcLLLcl LDyWUfU 


IL-inj-q iViaj]+|oaucnej 


Oc 1 cL LK 1 y il LDyLMdi dL Lcl 


I ft An\ 1 1 1 n rr-\'t+r\ 1 

|Maj)+|uronej 


0 c 1 cL L r\ 1 y 1 1 LDy WU 1 U 


IPtrll-ul Mail-J-f rirnito 1 

1 on i |t[ iviaj pr| uiuiiy j 


C /-\ 1 AAfTAnAAIimAAf TnA 

0 c 1 cL L 1 UUULUIllcil LtilU 


l^trlLlJ ftfl^i LlJ \ 1 

[Otrij+[ Majj+[ \ij 


0 c 1 cL L 1 UUULUIllcil LjLdr L 


l^trlLlJ M-^iLlJ UlAmo 1 

loinj-q iviaj]+| nomej 


0 c 1 cL L 1 UL 1 ilcLMU 


1 Maj )+[ \j ] 


OclcLLIULIilcOLdi L 


fMoTlj-l rii^hi itl 
1 iviaj jt| ueuuij 


jc 1 CL LUUDy L 1 ll c 


ro^n j_[ Mai iti 

[ iviaj ) t[ nam j 


jc 1 CL LUUDy rdy c 


( Maj ) +( Page precedente] 


jcicL Lupoy rd 1 dy 1 dpn 


[oirij~r[ iviajj t[ nauij 


1 dUDdLKWa 1 U 


[ iviaj j t[ i auj 


1 du rur wd r u 


j_aDj 


1 uyy 1 CDU 1 U 


[Uin |+[ bj 


1 uyy 1 CDU 1 1 c Lb 


IPtrllj-l Mail-I-[T~] 

[oirij~r[ iviaj]T[Lj 


Toggl elnssrt 


Inciprpr 1 


Toggleltalic 


(CtrD+Q 


Toggl eNumbering 


ICtrO+fMan+fN] 


Toggl eSubscript 


[Ctri]+OemPlus 


Toggl eSuperscript 


[Ctri]+[ Maj]+0emPlus 


Toggl eUnderline 
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13.7 Liste des classes par categories 

Presentation 

■ Border 

■ BulletDecorator 

■ Canvas 

■ DockPanel 

■ GridView 

■ GridSplitter 

■ GridView 

■ GroupBox 

■ Panel 

■ Separator 

■ StackPanel 

■ WrapPanel 

■ Viewbox 

Boutons 

■ Button 

■ RadioButton 

■ RepeatButton 

Menus 

■ ContextMenu 

■ Menu 

■ Tool Bar 

Listes de choix 

■ ComboBox 

■ ListBox 

■ Tree View 
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Selection de valeurs 

■ CheckBox 

■ Slider 

Navigation 

■ Frame 

■ Scroll Bar 

■ Scroll Viewer 

■ TabControl 

Informations utilisateurs 

■ Expander 

■ Label 

■ Popup 

■ ProgressBar 

■ StatusBar 

■ Tool Tip 

Documents 

■ DocumentViewer 

■ FlowDocumentPageViewer 

■ FlowDocumentReader 

■ FlowDocumentScroll Viewer 

Edition de texte 

■ TextBox 

■ RichTextBox 

■ PasswordBox 

Multimedia 

■ Image 

■ MediaElement 
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13.8 Liste des couleurs predefinies 



Couleurs predefinies 



Couleur 



Al iceBlue 



AntiqueWhite 



Aqua 



Aquamarine 



Azure 



Beige 



Bisque 



Black 



BlanchedAlmond 



Blue 



BlueViolet 



Brown 



BurlyWood 



CadetBlue 



Chartreuse 



Chocolate 



Coral 



CornflowerBlue 



Cornsil k 



Crimson 



Cyan 



DarkBlue 



DarkCyan 



DarkGoldenrod 



DarkGray 



DarkGreen 



DarkKhaki 



DarkMagenta 



DarkOl iveGreen 



DarkOrange 



DarkOrchid 
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Couleurs predefines 



Couleur 

DarkRed 

DarkSalmon 

DarkSeaGreen 

DarkSlateBlue 

DarkSlateGray 

DarkTurquoise 

DarkViolet 

DeepPink 

DeepSkyBlue 

DimGray 

DodgerBlue 

Fi rebrick 

Floral White 

ForestGreen 

Fuchsia 

Gainsboro 

GhostWhite 

Gold 

Goldenrod 

Gray 

Green 

GreenYellow 

Honeydew 

HotPink 

IndianRed 

Indigo 

Ivory 

Khaki 

Lavender 

LavenderBlush 

LawnGreen 

LemonChiffon 
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Couleurs predefines 



Couleur 

LightBlue 
LightCoral 
LightCyan 

Li ghtGol denrodYel 1 ow 

LightGray 

LightGreen 

LightPink 

LightSalmon 

LightSeaGreen 

LightSkyBlue 

LightSlateGray 

LightSteelBlue 

LightYellow 

Lime 

LimeGreen 
Linen 
Magenta 
Maroon 

MediumAquamarine 

MediumBlue 

MediumOrchid 

MediumPurple 

MediumSeaGreen 

MediumSlateBlue 

MediumSpringGreen 

MediumTurquoise 

MediumVioletRed 

MidnightBlue 

MintCream 

MistyRose 

Moccasin 

Name 
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Couleurs predefines 



Couleur 

NavajoWhite 
Navy 
OldLace 
01 i ve 
01 iveDrab 
Orange 
OrangeRed 
Orchid 

PaleGoldenrod 

Pal eGreen 

PaleTurquoise 

PaleVioletRed 

PapayaWhip 

PeachPuff 

Peru 

Pink 

Plum 

PowderBlue 

Purple 

Red 

RosyBrown 

Royal Blue 

SaddleBrown 

Salmon 

SandyBrown 

SeaGreen 

SeaShell 

Sienna 

Silver 

SkyBlue 

SlateBlue 

SlateGray 
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Couleurs predefines 



Couleur 

Snow 

SpringGreen 

Steel Blue 

Tan 

Teal 

Thistle 

Tomato 

Transparent 

Turquoise 

Violet 

Wheat 

White 

WhiteSmoke 
Yel 1 ow 
YellowGreen 
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Index 



AcceptsReturn, 40 
AcceptsTab, 40 
Alignement, 25 

Horizontal, 26 

Vertical, 26 
AlignmentX, 52 
AlignmentY, 52 
Angle, 220 
AngleX, 221 
Angle Y, 221 
Animation, 241, 346 
Annotation, 282 

AnnotationService, 283 
Application, 133 
ApplicationDefinition, 134 
ArcSegment, 322, 368 
Attribut, 14 
Aurora Designer, 310 



Border, 47, 368 
BorderBrush, 23 
BorderThickness, 23 
Bouton, 46 

Defaut, 47 

Delai, 112 

Echap, 47 

Intervalle, 112 

Repetition, 112 
Bouton radio (voir RadioButton), 102 
BreakPageAfter, 256 
BreakPageBefore, 256 
Brush, 243 

Bulle d' information, 106 
Bulle Info-bulle, 106 
Bullet, 260 
BulletDecorator, 259 
Button, 369 
ByteAnimation, 241 



B 



Background, 28, 342 

Balise, 14 

Barre d'outils, 183 

Controle, 184 

Debordement, 188 

Flottante, 188 

Orientation, 187 
Barre de statut, 281 
Barres de defilement, 77 
BeginStoryboard, 242 
BeginTime, 246 
BezierSegment, 322, 368 
Binding (voir Liaison), 195 
Blocks, 280 
Bold, 34 
Bord, 47 

Mobile, 66 



Cadre, 47 

Arrondir, 48 
CanGoBack, 149 
CanGoForward, 149 
Canvas, 56, 370 

Bottom, 59 

Left, 57 

Right, 59 

Top, 57 

Case a cocher (voir CheckBox), 100 
CenterY, 221 
Cercle, 318 
CharacterCasing, 40 
CheckBox, 100, 371 

Cochee, 101 

Etat indetermine, 101 
CIDER, 290 
Click, 139 
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Collection, 15 
ColorAnimation, 243, 373 
ColSpan, 66 
ColumnDefinitions, 62 
Columns, 273 
ColumnSpan, 63 
ComboBox, 98, 373 

Editable, 99 
ComboBoxItem, 98 
Connexion, 193 
ConstructorParameters, 216 
Content, 23 
ContentElement, 366 
ContentPresenter, 234 
ContentSite, 234 
Control, 364 
ControlTemplate, 234 
Coordonnees, 56 

Systeme de coordonnees, 60 
CornerRadius, 48 
Couleur, 28 



D 

DataContext, 194, 207, 209 
DataSet, 192 

Liaison, 194 
DataTable, 201 
DataTemplate, 209, 214 
Deboguer, 298 
Debug, 298 
Decoration, 35 
Defilement, 77 
Delay, 112, 115 
Desactive, 58 
DiffuseMaterial, 374 
DirectionalLight, 324, 374 
DisplayMemberPath, 202, 234 
Dock, 74 

DockPanel, 72, 375 



Dock, 74 
Document 

Charger, 279 

Imprimer, 280 

Sauver, 279 
DocumentViewer, 254, 375 
DoubleAnimation, 244, 376 
Double AnimationUsingKey Frames , 
245, 376 

DynamicResource, 225 



E 

Echelle, 221 
Ellipse, 317, 376 
EllipseGeometry, 323 
EndPoint, 230 
Evenement, 139 
EventTrigger, 245, 348, 377 
ExpandDirection, 120 
Expander, 118, 377 
Express Application, 142 



F 

Fenetre navigable, 157 
Figure, 270, 377 
Fill, 317 

FixedDocument, 250, 379 
FixedPage, 378 
Floater, 270, 379 
FlowDocument, 254, 380 
FlowDocumentPage Viewer, 264 
FlowDocumentReader, 264 
FlowDocumentScrollViewer, 261 
Focusable, 235 
Font, 27 
FontFamily, 27 
FontSize, 27 
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FontStrech, 28 


HorizontalAlignment, 26 


FontWeight, 28 


HorizontalAnchor, 268 


Foreground, 28 


HorizontalContentAlignment, ! 


Frame, 88, 153 


HorizontalScrollBarVisibility, 


Framework 3.0, 13 


irrAii i f.f. 


Freezable, 366 


Hyperlink, 382 


Fusion 




De colonnes, 63 




De lignes, 63 


1 
1 




IIS, 141 




Image, 48, 383 




Fond, 50 


GoBack, 149, 161 


ImageBrush, 51, 383 


GoForward, 149 


ImageSource, 49 


Gradient 


Imprimer, 280 


Lineaire, 230 


XAMLPad, 18 


Radial, 230 


Inclinaison, 221 


GradientStop, 229, 380 


Info-bulle, 106 


GradientStops, 230 


Int32Animation, 241 


Graphic Designer, 303 


IntelliSense, 19 


Grid, 61, 380 


Interactive Designer, 306 


Column, 62 


Interval, 112, 115 


ColumnSpan, 63 


IsCancel, 47 


Row, 62 


IsChecked, 101-102, 173 


GridSplitter, 66, 381 


IsDefault, 47 


GridView, 211, 382 


IsEditable, 99 


GridViewColumn, 382 


IsEnabled, 43, 58, 65, 95, 172 


Grille, 61 


IsExpanded, 120 


Bord mobile, 66 


IsFocused, 241 


Fusion de colonnes, 63 


IsMouseOver, 241 


Fusion de lignes, 63 


IsReadOnly, 43, 95 


GroupBox, 105 


IsSelected, 94, 111 


Header, 106 


IsSnapToTickEnabled, 115 


GroupName, 103 


IsTextSearchEnabled, 100 




IsThreeState, 101 




Italic, 34 




ItemSource, 209 


H 


ItemsPresenter, 235, 237 


Header, 106, 120 


ItemTemplate, 209 



Height, 24, 49 
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J 

JavaScript, 166 



K 

Key Time, 246 



L 

Label, 22-23, 384 

Bord, 23 

Content, 23 
LargeChange, 115 
Liaison 

DataSet, 194 

Objet business, 203 
Line, 316, 385 

LinearGradientBrush, 230, 385 

LineBreak, 38 

LineGeometry, 323 

LineSegment, 322, 385 

List, 257 

ListBox, 92, 386 

Mode de selection, 94 
Valeur par defaut, 92, 94-95 

ListBoxItem, 92 

Liste, 92 

ListView, 208, 387 

DataTemplate, 209 

ItemTemplate, 209 
Loaded, 194, 242 
LoadedBehavior, 126 
Location, 35 
LookDirection, 324 



Index 




M 

Majuscule imposee, 40 
Marge, 33 
Margin, 33 
MarkerOffset, 259 
MarkerStyle, 258 
Matrice, 222 
MaxHeight, 25, 64 
MaxLength, 40 
MaxLines, 42 
Max Width, 25, 92 
MediaElement, 126 
MediaTimeLine, 127 
Menu, 170, 387 

Action, 173 

Contextuel, 178, 226 

Dynamique, 176 

Inactif, 172 

Separateur, 172 
Menu contextuel 

Partage, 226 
Menultem, 170, 387 
MeshGeometry3D, 324, 388 
MethodName, 217 
MethodParameters, 217 
MinHeight, 25 
MinLines, 42 
Minuscule imposee, 40 
MinWidth, 25 
Mosai'que, 51 
Mot de passe, 46 
MouseMove, 246 



N 

Name, 29 
Namespace, 151 

Namespaces, 16 
Navigate, 148 



Le guide du codeur • 425 




Index 



Navigateur Internet, 140, 142 
NavigationService, 147 
NavigationWindow, 157-158, 388 
Nceud XML, 14 
Nom d'un controle, 29 
Note, 283 



o 

ObjectDataProvider, 207, 214, 

Objectlnstance, 217, 389 

ObjectType, 216 

Offset, 229 

Onglet, 109 

OnReturn, 149 

Ordre, 88 

Des tabulations, 88 
Orientation, 187 



P 

Page, 135, 143, 389 

Statique, 146 
PageContent, 250, 390 
PageFunction, 151 
Paragraph, 254, 391 
Parent, 164 

PART_ContentHost, 233 
Password, 46 
PasswordBox, 46 
Path, 321, 392 
PathFigure, 320, 392 
PathGeometry, 323 
Pen, 35, 392 
PerspectiveCamera, 393 
Photo, 48 

PlacementRectangle, 123 
PlacementTarget, 123 
Point3D, 324 



Police (voir Font), 27 

XAMLPad, 18 
PolyBezierSegment, 322 
Polygon, 318, 393 
Polyline, 318, 393 
PolyLineSegment, 322, 393 
PolyQuadraticBezierSegment, 322 
Popup, 123, 394 
Position, 324 
PrespectiveCamera, 324 
PrintDialog, 279 
Projet, 132 
Property, 227, 239 
Propriete attachee, 57 



Q 

QuadraticBezierSegment, 322 



R 

RadialGradientBrush, 230, 237, 394 
RadioButton, 102, 394 

Groupe, 103 

Selection, 102 
RadioButtonList, 103 
Rectangle, 318, 395 
RectangleGeometry, 323 
RenderTransform, 220 
RepeatButton, 112, 396 
ResizeDirection, 66 
ResizeMode, 136 
Ressource, 223 

Dynamique, 225 

Nom, 224 

Statique, 225 

Utilisation, 224 
RichTextBox, 275 
Root, 16 
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RotateTransform, 220, 396 
Rotation, 220 
RoutedEvent, 245, 348 
RowDefinitions, 62 
RowSpan, 66 



s 

SartPoint, 230, 320 
ScaleTransform, 221, 245, 396 
ScaleX, 221 
Scale Y, 221 
ScrollViewer, 77, 396 
Section, 257, 397 
Securite, 141 
Selectedlndex, 92 
SelectedValue, 234 
SelectedValuePath, 234 
SelectionMode, 94 
Setter, 227, 397 
ShowInTaskbar, 138 
ShowPageBorders, 254 
ShowsNavigationUI, 148 
ShowsPreview, 67 
Size, 321 

SizeToContent, 136 
SkewTransform, 221, 397 
Slider, 114, 398 

SolidColorBrush, 224, 244, 399 
SoundPlayerAction, 349 
Source, 209, 252 

De donnees, 192 
SplineDoubleKeyFrame, 245, 399 
StackPanel, 70, 399 
Startlndex, 259 
StartupUri, 133 
StaticResource, 225 
StatusBar, 282 
StatusBarltem, 281 
Storyboard, 127, 241, 400 



Index 




Stretch, 52, 121 
StretchDirection, 121 
Stroke, 317 
StrokeThickness, 317 
Style, 227, 400 

Complex, 229 

Heritage, 231 

TargetType, 228 
Surlignement, 283 
Systeme de coordonnees, 60 



T 

TabControl, 110, 401 
Tablndex, 88 
Tabltem, 110, 402 
Table, 257, 273, 401 
TableCell, 273, 401 
TableColumn, 273, 401 
TableRow, 273, 401 
TableRowGroup, 273 
Taille, 24 
TargetName, 242 
TargetType, 228 
Template, 232 
TextAlignment, 33, 258 
TextBlock, 30, 403 
TextBox, 38, 404 

Desactivee, 44 

Lecture seule, 43 

Passage a la ligne, 40 

Tabulation, 40 
TextDecoration, 35 
Texte 

Coupure automatique, 31 
Decoration, 35 
Gras, 34 
Incomplet, 32 
Italique, 34 
Souligne, 34 
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TextRange, 279 
TextTrimming, 32 
TextWrapping, 32, 40 
TickFrequency, 114 
Ticks, 114 
TileMode, 51 
Title, 135 
ToolBar, 183, 405 
ToolBarTray, 186, 405 
ToolTip, 107 
Topmost, 138 
Transformation 

Echelle, 221 

Matrice, 222 

Oblique, 221 

Rotation, 220 
TranslateTransform, 245, 406 
Tree View, 212, 406 
TreeViewItem, 406 
Trigger, 127, 139, 346, 406 

EventTrigger, 245, 348, 377 



u 

UIElement, 279 
Underline, 34 
Uniform, 407 
UnloadedBehavior, 126 
UpDirection, 324 



V 

Value, 230, 246 
VerticalAlignment, 26, 64, 170 
VerticalAnchor, 268 
VerticalContentAlignment, 25 
VerticalPageSpacing, 254 
VerticalScrollBarVisibility, 43, 78 
ViewBox, 121, 407 



Stretch, 121 

StretchDirection, 121 
Viewport, 51 
Viewport3D, 323, 407 
Visibility, 176 
Visual, 279, 363 
Visual Studio, 290 



w 

WBA, 140, 142 

Width, 24, 49 

Win32, 13 

Window, 135, 408 

WindowHeight, 146 

Windows Presentation Fundation, 13 

WindowsStartupLocation, 135 

WindowState, 136 

WindowStyle, 137, 342 

WindowWidth, 146 

WinFX, 13 

Wizard, 158 

WPF, 13 

WPF/E, 165 

WrapPanel, 68, 409 

Wrapping, 31, 41 



X 

X 

Key, 227 

TypeArguments, 151 
XI, 317 
X2, 317 
XAMLPad, 17 

Auto Parse, 18 

Cacher le code, 18 

Imprimer, 18 

Police, 18 
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Refresh, 18 

Zoom, 18 
XML, 14 

Attribut, 14 

Balise, 14 

Noeud, 14 
XmlDataProvider, 207, 409 

Source, 209 

XPath, 209 
XmlStreamStore, 285 
XPath, 209 



Index 




Y 

Yl, 317 
Y2, 317 



z 

ZAM 3D, 313 
Zoom, 254 
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